Prototypes

[00:00:00]
>> Kyle Simpson: So armed with our knowledge of the this keyword, we're gonna look at the prototype system, because they really do go hand in hand. It's almost like you can't understand prototypes without understanding the this keyword. And vice versa, you can't understand the this keyword without understanding prototypes. Or at least you can't understand why the this keyword is so powerful without understanding prototypes.

[00:00:20]
All right, so here's an example of what we call prototypal or prototypal classes code. This is a little less common these days because normally you now are gonna see people using the class keyword that was recently added. And we'll look at the class keyword in just a moment.

[00:00:34]
But I wanna show you under the covers what the class keyword is actually doing. If I wanted to make a thing that was like a class called workshop, that I could instantiate several times, I could define a function called workshop, and notice that it's this aware. There you see the this keywords, right front and center.

[00:00:53]
These are very highly related concepts. That function is going to become what we call a constructor. It's gonna act as if it's a constructor for instances of this so-called workshop class. And to add methods into the definition of our workshop class, we're going to add them to the prototype of the workshop constructor, okay?

[00:01:16]
So prototype means that it is an object where any instances are going to be linked to or to delegate to. So on line eight, when I say deepJS equals new workshop, the new keyword is gonna invoke that workshop function. And the object that gets created is going to be linked to Workshop.prototype.

[00:01:39]
And since workshop.prototype has an ask method on it, on line 11, I can take that deep js instance and say deep js is not ask. It is important for you to see that deep js is the object does not have an asked method. But it is instead prototype linked to workshop.prototype.

[00:02:02]
And therefore, when we say deepJS.ask, it's actually going to delegate one level up the prototype chain from deepJS up to workshop.prototype. And when it invokes the ask method, look at the call site down on line 11. Look at how that function is being invoked. Do you remember just a little while ago when I was talking about the this keyword?

[00:02:23]
What I said, when I said there's one of those rules that at the call site it determines what a this keyword should point at. What do we see on line 11? We see deepJS.ask. And deepJS.ask is how we are invoking the ask method in this context of the deepJS object.

[00:02:44]
Now, when we invoked deepJS, when we invoked workshop to create deepJS, that was on line eight. It ran that function, workshop, and when it was running the this keyword, what was the this keyword pointing at? The object that we would end up calling deepJS. And so, you see on line two that we added a teacher property to it.

[00:03:06]
That's why on line five, when we say this.teacher, we're actually saying deepJS.teacher. Or then, on line 14, when we say reactJS.ask, by line five, we're now saying reactJS.teacher. It's because we have found a function through the prototype chain, invoked it, but it still is determine what the this keyword is gonna point at by the call sites on either line 11 or line 14.

[00:03:35]
That, in a very, very very brief nutshell, is prototypal class pattern. That is how we have a method on one object that is able to delegate to another object and use itself as the this keyword. That's what happens when deepJS delegates to the ask method and invokes it in its own context.

[00:03:57]
That's why we print out Kyle and then when on line 14 that's why we print out Suzy.