Deep JavaScript Foundations, v3

Shadowing Prototypes

Kyle Simpson

Kyle Simpson

You Don't Know JS
Deep JavaScript Foundations, v3

Check out a free preview of the full Deep JavaScript Foundations, v3 course

The "Shadowing Prototypes" Lesson is part of the full, Deep JavaScript Foundations, v3 course featured in this preview video. Here's what you'd learn in this lesson:

Kyle walks through an example of shadowing within the prototypes system.


Transcript from the "Shadowing Prototypes" Lesson

>> Kyle Simpson: All right, so continuing on with our exploration of this prototype pattern. If I were to, as I'm doing on line 10, take that deepJS object and add an ask to it. See on line 10, I'm adding an ask directly to deepJS. Remember, the one that's created, line 4, is up on workshop.prototype.

And I'm making another one of the same name on the deepJS object. And if you can visualize to that diagram in your head, then that means that we have shadowing going on. Cuz we have two different levels of the prototype chain with the exact same property. When I say on line 11 this.ask, what is the this keyword gonna point at on line 11?

At this point, whenever I ask you, what is the this keyword gonna point at? Your default response should be, where's the call-site? So where is the call-site here? What line is it on?
>> Speaker 2: 14?
>> Kyle Simpson: Line 14, and what does line 14's call-site tell us about what the this keyword will be inside of that method call?

Remember the implicit binding rule? That's the most important of all the rules, it tells us that this keyword is gonna point at deepJS. So on line 11, this is deepJS. So we are now saying deepJS.ask, again.
>> Kyle Simpson: So what's gonna happen? And infinite recursion, right. We're gonna keep saying, and then we're gonna run out of stuff.

So the this dot here doesn't work in place of a super. It's not a relative polymorphic reference here, you follow me? It doesn't work, how do we go one level up the prototype chain if we have a this keyword, reference, how do we go from deepJS up to workshop.prototype?

>> Kyle Simpson: Well you could say, .dondoproto. Dondoproto is the property, that goes up one level of the prototype chain, up to workshop. But if I said this .dondoproto.ask, and then I called it. What would it's this keyword be?
>> Kyle Simpson: If the call site said this.dunderproto.ask, and it invoked a method there, what would that this keyword point at?

>> Speaker 3: Workshop.
>> Kyle Simpson: Workshop.prototype, which is not what we want. So instead on line 11, we have to do this abomination. This .dunderproto.ask.callthis. We find the method one level up the prototype chain but we have to invoke it in our these context. It's horrible, right? I refer to this as explicit pseudo polymorphism.

This is horrible, this is not real relative polymorphism. It's not a stand in for the super keyword. And by the way, if we stuck another object on the end of this, like if we extended our prototype chain by one level. Now we don't need one .dunderproto in there.

We need two dunder protos. That functions got to say this, .dunderproto.dunderproto.ask.callthis. And if we add a third link now we need three dunder protos. So in other words, when you try to shadow without using the class system. When you were in prototypes and you tried to shadow, you ended up creating essentially this complete breakage.

There's no way to do the relative polymorphism. Why on earth would we shadow in the first place? Was because shadowing is how you do polymorphism, right? In class design theory, the whole point of having a child class is so that you can inherit something from the parent. Override it and then call super to access the parent version of it, to extend it.

So that's what we're trying to do here. We're trying to override and extend the ASK method but it doesn't work because we are outside of the confines of a system that is very carefully constructed through duck tape, a super keyword.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now