Deep JavaScript Foundations, v3

Classical vs Prototypal Inheritance

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 "Classical vs Prototypal Inheritance" 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 clarifies the difference between classical and prototypal inheritance in terms of copying or linking relationships.


Transcript from the "Classical vs Prototypal Inheritance" Lesson

>> Kyle Simpson: Let's try to clarify some ideas around inheritance, okay? Because there is a lot of things that I've thrown at you and I just wanna make as clear sort of a visual diagram as I can. In classical oriented Languages C++, Java, stuff like that. When you make a class call workshop and you instantiate it, you are conceptually and in some cases, physically copying down into those instances.

And when you make a child class call another workshop that extends workshop, you are copying down into that. And when you instantiate that child class. You're doing more copies. So in other words these arrows are going from left to right, top to bottom, because they are fundamentally copy operations.

When you try to do prototypal inheritance, you have a workshop.prototype object. And then you make another object like deepJS or reactJS, those objects are linked to Workshop.prototype. And then when you make another workshop.prototype it is linked to. And then when you make JSRecentParts it is linked too. So here, the arrows go from right to left, and bottom to top.

Because this is a linkage, not a copy. Follow me.
>> Kyle Simpson: This is often to referred to as prototypal inheritance.
>> Kyle Simpson: I have a deep, troubling issue with the idea of calling this prototypal inheritance. And here is what my issue is. The word prototypal doesn't even really mean anything concrete to must people.

Nobody even really knows what that means. They just associate it with this strange system. But the word inheritance has a very strong meaning, it carries lots of baggage. And most people's brains have been programmed to think about inheritance, as having copy relationships. So what we did was we took this confusing-sounding fancy word like prototypal, stuck it in front of another word.

And then we pretended as if that's okay, to completely reverse the meaning of it. It's as if I stood up in front of you and I had an apple in one hand, and an orange in the other. And then I said, no, no, no that's not an apple.

That's just a red orange.
>> Kyle Simpson: You'd look at me like, what you call it doesn't change what it is. It's an apple, right? What you call this doesn't change what it is. It only creates more confusion. For 20 plus years JavaScript developers have been confused by why don't classes in JavaScript work.

The way they do in other languages, and nobody seems to have had the courage to tell them, it's because the systems are completely fundamentally different.
>> Kyle Simpson: We've been, in a sense, pandering to the emotional attachment to the class design pattern and adding extra complexity on top of JavaScript to suit the syntactic sugar designers.

Instead of just embracing what JavaScript already is. Embracing its prototype system, embracing the dynamic this nature. We keep trying to put all these other things on it so that it can be a class system, dang it, it's definitely classes, and in reality it's not classes. It's just we're trying to do a better and better job of duct taping it to look like classes.

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