Prototypal Inheritance

[00:00:00]
>> Kyle Simpson: Speaking of inheritance, if we wanted to do a true sort of child class in the prototypal style, we'd define line eight and another workshop contructor. And the way we make another workshop extend or inherit from the workshop is this line right here, oops, sorry. This line right here, line 11, object dot create.

[00:00:24]
On line 11, object dot create, we are saying take the prototype that I initially got, which is not what I want, and change where it is linked to make sure that it links the workshop dot prototype. Object dot create does two things. It's a utility built in the es5 and it does two things.

[00:00:43]
See if this sounds familiar. The first thing that object dot create does is create a brand new empty object dot of thin air. And then, the second thing it does is it links that object to another object. It's the first two steps of the new algorithm as a specific API method called object dot create.

[00:01:00]
So here, we're saying I want my another workshop prototype to be prototype linked to the workshop do prototype. Alternatively, again, it's a bit of an anti pattern, but alternatively, you could have said another workshop dot prototype dot dunderproto equals workshop dot prototype. You could have rewired it that way.

[00:01:24]
But we're creating a new object to get a new linkage. And that is the effect, then, that the js recent parts object that I've created on line 16, that object is linked to the prototype object, which is linked to the workshop dot prototype object. They're linked through that hidden prototype chain.

[00:01:47]
>> Kyle Simpson: Now, the linkage that exists between these objects, that's not a bad thing at all. That's actually a magical awesome thing. But we have a whole bunch of complexity layered on top. We've got all these things that look like constructor functions. We've got all this verbose dot prototype stuff.

[00:02:03]
We've got confusing new keyword instances. And all of this artifice is on top of these three objects linked together.
>> Kyle Simpson: And it's the objects being linked together that actually creates all of the power here. It creates the ability for me to say line 18 js recent parts dot speak up.

[00:02:22]
Does that object have a speak up method on it? The line here, line 18, is there a speak up method on JSRecentParts?
>> Speaker 2: No.
>> Kyle Simpson: So where does it go next?
>> Speaker 2: Another workshop?
>> Kyle Simpson: It goes to another workshop prototype which does have a speak up. So when that function is invoked, what is the thisKeyword gonna point at?

[00:02:42]
>> Speaker 3: JSRecentParts.
>> Kyle Simpson: Still gonna point to JSRecentParts. And it says this dot ask. So does JSRecentParts have an ask method? So where's it gonna go? Backup to another workshop prototype. Does that one have an ask method on it? So where's it gonna go? Does this one have an ask method on it?

[00:03:03]
Yes, when it invokes, what's the this keyword gonna point at? Still gonna point at JSRecentParts. No matter how many times up the prototype chain you have to resolve to find your methods, and no matter how far up they go, the this binding is still controlled at the root by the call site.

[00:03:22]
And I have a fancy academic term for that, I call that super unicorn magic. That's amazing and awesome that it can find these functions in all these different places in the prototype chain, and still make sure their this context is exactly what we would expect, which is rooted at the call stack.

[00:03:43]
You had a question?
>> Speaker 4: Just to absolutely confirm. Were line 11 not to exist, this would break because another workshop dot prototype would just point to object dot prototype.
>> Kyle Simpson: That is correct, yes. Line 11 is the extends clause, if you will. That's how we make another workshop link to workshop.