Transcript from the "Dunder Prototypes" Lesson
[00:00:00]
>> Kyle Simpson: You remember the constructor property in our diagram, right? The one that was pointing from the workshop.prototype back to workshop. Why is it online ten that I can say deepJS.constructor? There is no constructor property on deepJS. But for the exact same reason, when I asked for a constructor property on deepJS, it doesn't find it on that object.
[00:00:24] But where does it go next? It goes from deepJS all the way up to workshop.prototype. And does workshop.prototype have a constructor property on it? And what does it point at? It points at workshop. So that's why deepJS.constructor is the same thing as workshop. Now, that seems to imply that deepJS was constructed by workshop, doesn't it?
[00:00:55] But we know that the new constructor is the one that actually created it. And the workshop object almost had nothing to do with it. It just happens to be that these properties are in place, these relationships are in place, to try to tell this narrative that a class system has occurred.
[00:01:15]
>> Kyle Simpson: Now line 12, deepJS.__proto__, oops sorry. Hit the wrong button here. deepJS.__ proto__, that's a really long thing to say, and I don't wanna say that ever again. So let's come up with a better name for that. It turns out that you can take underscore underscore, and you can make it double underscore.
[00:01:41] Or and then you can even shorten that, the cool kids in JavaScript like to refer to this property as dunderproto, okay? So line 12 says deepJS.dunderproto, and look at what it's pointing at, it's pointing at workshop.prototype. In other words, deepJS seems like it has a property on it, that points to the thing that it's linked to.
[00:02:06] Except deepJS doesn't have a property on it called dunder proto. So what do you think happens when deepJS tries to access a dunder proto? Where does it go next?
>> Kyle Simpson: It goes from deepJS up to where?
>> Kyle Simpson: Up to workshop.prototype. Not workshop but workshop.prototype. It goes up to that object.
[00:02:31] And it asks do you have a dunder proto? And the answer is, no. So where was workshop.prototype linked? It was linked to object.prototype. So we would go one up level to the line zero environment if you will. We'd go up to the object.prototype, and guess what there is a dunder proto on there.
[00:02:51] And guess what else, it's not even a property, it's a getter function. Object.prototype has a getter function called dunder proto. Now you're accessing it on line 12 as if it's a property. But a getter function so it's going to invoke it as if it's was a function. When it invokes that function on object.prototype, internally what will it's this keyword be?
[00:03:19] What's the call site?
>> Student: DeepJS.
>> Kyle Simpson: The call site is deepJS, right. This is like a function call even though there's no parenthesis. So it's still that same disbinding rule consistently applied even in this case. It invokes that getter function on the object.prototype in this context of your instance, which reaches into it and gives you this hidden internal linkage called the prototype chain.