6.7 Prototypes

Hi folks. In this lesson we're going to take another quick look at prototypes in JavaScript. So remember the prototype is a special property that all objects have. This is the object that they are descended from and from which they inherit properties and methods. For example, when we create an object literal, even if we don't add any properties to it ourselves, it will still have certain properties and methods that we can make use of. In this example we call the has own property method on the empty object literal that we created and stored in the variable myobj. So this hasOwnProperty method came from the object literal's prototype, which is the prototype property of the object, so that's object with a capital O, constructor which is what created the object literal for us behind the scenes. So we don't actually need to look at the outputs of hasOwnProperty('key'). We know that our object literal doesn't have a property called key, so this method is gonna return false. We don't need to worry about that. But let's just log the object itself to the console. So there's our empty object literal in the console. Let's just open it up. So we didn't add any properties to this object literal ourselves, but as we can see, it still has this special __proto__ value. And that property is the prototype object of the object literal. And as we can see, that currently points to the object constructor. So this is the object from which our own object is descended. When we open up the __proto__ property, which from this point forward I'm just gonna refer to as proto, we can see that there are a bunch of other properties and methods. So we can see the constructor property. And that also points to the object constructor. And we can see the hasOwnProperty method, which we looked at just a moment ago and which we've used earlier in the course as well. So all of these properties and methods are what is being inherited via this __proto__ object. So this is very interesting, but we shouldn't actually use this proto object in our own code ever. It's awful for performance and it's actually deprecated but it is interesting to look at and it can sometimes be useful purely for debugging scenarios. So prototypes themselves may form chains, similar to how nested scopes form chains. When we access an identifier in one scope, if the identifier is not found, the JavaScript engine moves up to look in the parent scope and so on and so forth, all the way through the scope chain until it reaches the global scope. When we try to access a property or a method of an object a similar process occurs. If the property or method is not present directly on the objects that we tried to invoke it on the JavaScript engine will look in the current object's prototype and then the prototype of that object and so on and so forth right back to the object's, capital o, Object prototype. If the property or method is not found there the engine gives up and returns undefined. But you can see that prototype chains are very similar to scope chains conceptually. So let's see this in action with another example. So in this example we first create a new constructor function called Example. We then set the prototype of this constructor function to a new array instance which we can access by invoking the array constructor. We then create a new instance object using our Example constructor and lastly we just log this to the console. So let's go to the browser and take a look at the output this time. So again, we just see our empty Example object and let's open this one up. So we still see a __proto__ property and that points to an instance created by the array constructor. Let's expand this one. As we know, arrays have a length property. So our example object will also have this inherited length property. It won't have it directly but it can still reach it through the prototype chain. And there is also another __proto__ property. So let's open that one up. And here we can see all of the methods that arrays have access to. And that means that our instance will also have access to all of these methods even though it isn't actually an array. Right down at the bottom we can see that there's another __proto__ object, this time pointing to the object constructor. Lets open that up. And we can see all of the properties and methods that's get inherited from the object constructor. And there are no more __proto__ objects because ultimately everything in JavaScript comes from the object constructor. So what we've done there in the console is manually navigate the prototype chain. That is exactly what happens when we try to invoke a property or method on an object. The engine will navigate the prototype chain looking for that property or method and only if it doesn't find it once it gets up to the object constructor does it return undefined. So let's just do a simple test. And we can see that even though our custom object has the array prototype, because the array prototype itself can access the object prototype we can still make use of the method. We don't get any errors and the code doesn't blow up. So in this lesson we looked at the special _proto_ property that all objects and all objects' instances in JavaScript have access to. And we learned that this is primary mechanism for inheritance in JavaScript and it's how the JavaScript engine is able to navigate the prototype chain. In the next lesson, we can look at default parameters and rest parameters. Thanks for watching.