Object Oriented Programming in JavaScript Tutorial

0:14 - Downloading and setting up the OOP JavaScript tutorial code

1:18 - 1 intro: Intro to OOP in JavaScript. Creating a basic JavaScript Object

5:58 - 2 what is prototype: Introduction to Prototype in JavaScript. Prototype is how JavaScript implements "Object oriented" principles. A "Prototype" Is a chain of objects linked to each other that an object will "look up to" to see if a function or property exists. If a property doesn't exist on the object itself, it will "look up" to its prototype. If the property is not found there, it will look up to the prototypes prototype, and so on until it reaches the parent Object type.

One of the major benefits of Prototype in JavaScript is that functions and properties are capable of being "shared", so a million instances of an object don't have a million copies of a function that all do the same thing.

13:21 - skipped 3-what-is-prototype-2-good-exercise

13:22 - 4 prototype-functions-vs-objects: Functions ARE objects in JavaScript. You can create properties on objects. In this section of the OOP JavaScript tutorial we show you that a function by default has a "prototype" property where we are supposed to store all functions that will be "looked up" to. This is where functions are stored when we start using JavaScript Classes in a later part of this JavaScript OOP tutorial

27:37 - Skipped 4.1

27:38 - 4.5 Why to use prototype (Optional) You may want to come back to this section AFTER we've covered classes, but either way is fine.

In this example we use JavaScript OOP principles to create 3 functions in a "lookup chain" with the Class keyword. Then we inject a method into one of the objects with the .prototype, and another method directly onto the function without the .prototype, so we can see that one of the functions is accessible and the other is not. The reason for this is because the JavaScript Class, or Object oriented system was designed to use the PROTOTYPE on a function to store properties and functions that are meant to be looked up to.

32:28 - 5 what-is-this. THIS in JavaScript. You can think of "this" as referencing the "left hand side of the dot".

39:11 - 6 this-arrow-functions This in Arrow functions. Arrow function scope behaves differently. When working with "this" in JavaScript Arrow functions, you want to ask yourself "What is the 'this' of the thing where the function was created?"

49:28 - 6.5-this-arrow-functions-gotcha Pay attention to WHEN the function is actually called, because that determines "what the this of the thing the arrow function was created in" is. In this gotcha we return a function to the global scope, which when called creates and returns an arrow function. Because the function that creates the arrow function was in the global scope, the window became the "this". This section explains these subtleties and how to spot them.

57:24 - 7-call-apply CALL and APPLY in JavaScript OOP allow you to call functions while forcing the 'this' to be something else.

1:07:12 - 8-bind BIND in JavaScript forces a "this" to be something else, and keeps it that way for the lifetime of that function.

1:12:27 - skipped 9-this-in-classes
1:12:28 - 10-new The new keyword is a concept used in JavaScript OOP to auto create and return objects for us. When you invoke the 'new' keyword a function will automatically create an empty object, use it as the 'this' to store properties passed into the function, and return the object for you.

1:19:14 - 11-classes classes in JavaScript make the OOP JavaScript features much easier to manage. The class keyword bundles up the "new" keyword functionality and the prototype functionality for us, AND gives us new features such as private methods.

1:22:43 - 12-JavaScript-Lookup-inheritance review of JavaScript OOP without using Classes.

1:23:43 - 13-class-inheritance JavaScript doesn't really have an "inheritance", but it does have an "extend" where objects "extend" other objects.

1:29:49 - 14-public-private-static methods. We show the difference between public, private, and static methods in JavaScript OOP.

1:33:28 - 15-class-vs-manual-prototype In this last section we compare how to create an object using class, and then how to create the same object without using the class keyword. We demonstrate internally how public and static methods work.