Introduction to Prototypal Inheritance in JavaScript

Link to Other Objects through the JavaScript Prototype Chain

Prototype Delegation with JavaScript's new Keyword

Understanding the .constructor property on JavaScript Objects

Understand JavaScripts this keyword within Prototypes

Use JavaScript's for-in Loop on Objects with Prototypes

Compose Objects with Object.assign to Create a Direct Copy

Understanding Prototype Delegation within JavaScript's Class Keyword

Assign and Access Methods of a JavaScript Class with Static Properties

Determine an Object's Constructor with JavaScripts instanceof Operator

Create Factory Functions for Object Composition

Use Polymorphism with Prototype Linked Objects

Replicate JavaScript Constructor Inheritance with Simple Objects (OLOO)

Understanding JavaScript's Prototypal Inheritance

Loops can behave differently when objects have chained prototype objects. Let's see the difference we get when we use the for-in loop on an object without a prototype, as opposed to an object with a prototype object. 

Instructor: [00:00] Loops give us the power to iterate over items and collections. Some loops work differently depending on the object and its prototype chain.

[00:09] Here, we have an object with two properties -- first name of Tyler and last name of Klerk. Let's try it, let n=0for that property and object, n++, then we'll console.log out n. We'll see that we get two. The for-in loop iterates over innumerable properties of an object.

[00:29] Because our object has two properties, we are going to get a return of two. Now, if we create a new object called proto object, with the property hair of brown, and then we do object.setPrototypeOf(object) to be proto object, we now see that the number of times our for loop has looped over each one of our properties of object is now three.

[00:51] This might be confusing because we did not change the number of properties on our original object. When we set proto object, which has just one property on it, to be the prototype object, our for-in loop steps through the prototype chain object-by-object.

[01:06] Now, instead of our for loop, let's do an if object has own property property, then we will n++. By doing so, we see that our n is now back to two. It has own property method returns a Boole indicating whether the object has the specified property as its own property as opposed to inhering it through the prototype chain.

[01:28] It's also good to know that our for-in loop will only iterate over distinct properties. With our if-check removed, we're back at three. If we change our hair property to be last name, you can see that now we are back to two.

Course

Understanding JavaScript's Prototypal Inheritance

Use JavaScript's for-in Loop on Objects with Prototypes

Share this video with your friends