MENU

Fun & Interesting

Introduction - Classes and Object Oriented Programming (OOP) - Javascript In Depth

Tech with Nader 9,585 2 years ago
Video Not Working? Fix It Now

We learn about the concepts behind Object Oriented Programming (OOP) in Javascript and how they build upon the idea or Prototypes. We also compare this to how other traditional OOP-based languages might work like Java or C++. We rebuild the basic class constructor using functions and the new keyword to see how the work behind the scenes. This show us how the class syntax helps automate some of this work for us with its constructor function. We also check out how to initialize the class state using the this keyword as well as class fields. We then wrap up the video by looking at class methods and how they relate to methods on the prototype of an object. Note that this is an advanced topic and will take a lot of practice and trying different things over time to really cement. We'll go through some practice exercises together on the class syntax, constructor function and class methods in the next video in the series. This is part of a series where we go over Javascript in depth to learn programming concepts as well as web development: https://youtube.com/playlist?list=PLovN13bqAx7D_MFjL0PHnCkYAHMSO8-kU Chapters: 00:00 Introduction 01:32 What is OOP really about? 06:25 Model a Fantasy Game 08:40 4 Principles of OOP 11:06 JS-Specific OOP Considerations 13:20 Modelling a Player V1 15:15 Modelling a Player V1 Code 19:11 Modelling a Player V2 20:25 Modelling a Player V2 Code 25:00 Class Syntax and Constructor 26:44 Coding our first Player Class 41:19 Class Methods 43:00 Class Methods Code Example 52:19 Class Fields 54:23 Next Steps 📦 Github Repository with the notes and exercise code+solutions: https://github.com/Nooder/javascript-in-depth 💬 Come join us on Discord to chat with a like-minded community about tech and learning: https://discord.gg/K4nkugP7Gd 🏅Support the channel and content through Super Thanks, Channel Memberships, or on Patreon: https://www.patreon.com/TechWithNader

Comment