Godson Njoku

Posted on Feb 9, 2019

Explain Inheritance in JavaScript Classes Like I'm Five

#explainlikeimfive #javascript

I am currently learning JavaScript with the aid of Codecademy Interactive JavaScript course and I find inheritance a bit confusing in JavaScript Classes especially in the case of a parent class with say two subclasses and how to implement them

Top comments (8)

Basti Ortiz • Feb 9 '19 • Edited

Your father (parent class) gives you, the student/son (subclass A), a vaguely written textbook about addition and subtraction. Since your father was not able to give you a lesson on the topic, you are stuck on a problem that you do not know how to solve. You look to your right to see that your brother (subclass B) is also confused.

That is when you decide to ask your father for instructions. Unfortunately, for some reason, your father also does not know how to solve the problem.

That is why your father goes to ask your grandfather (parent of the parent class) about it. Finally, your grandfather understands the problem and tells your father how to solve it, who later tells you how to solve it yourself.

Your brother also goes to your father to ask him about the problem, which in turn leads to your father asking your grandfather about the problem again. After explaining, your father finally approaches your brother and answers his questions.

In a nutshell, this is prototypal inheritance, where the implementation of a certain property or method is delegated to a "parent/ancestor class" if the current object does not already have an implementation for said property or method.

Guillaume Martigny • Feb 11 '19

Nicely said. You also scratch the surface of the issue with inheritance: it become complex to find "who knows what" (and decrease performance). That's why, most of the time, composition is preferred above inheritance.

When someone's born, all her ancestor gather to teach her everything they knows. This way, she don't need to rely on her father (and his father, and his father ...).

Basti Ortiz • Feb 11 '19

Despite its complexity, probably one of the biggest advantages you get from prototypal inheritance is the fact that all properties and methods in the prototype chain refer to the same instance of said property or method.

This makes prototypal inheritance quite space-efficient because it does not need to duplicate properties and methods for every instance of a class. The instantiated object simply has to refer, or rather point, to the corresponding property or method in the prototype chain it lacks implementation for.

Guillaume Martigny • Feb 11 '19

We're getting off tracks here, but composition don't duplicate anything. Try this:

const canSpeak = {
    speak: msg => console.log(msg),
};
const me = Object.assign({}, canSpeak);
me.speak("Hello"); // => Hello
const you = Object.assign({}, canSpeak);
console.log(me.speak === you.speak); // => true

Basti Ortiz • Feb 11 '19

Oh, I just wanted to mention a "feature" that comes with prototypal inheritance for the sake of discussion since this post is about prototypal inheritance in the first place.

Also, I never actually thought of composition that way. I didn't know that the two objects would end up referencing the same speak method. That's pretty cool. Thanks for the heads up!

Chris Curteman • Feb 10 '19

That's a great metaphor, love the way you put that!

Orim Dominic Adah • May 28 '19

This is awesome. Why don't you convert it to a blog post?

Basti Ortiz • May 28 '19

Hmm... I never really considered it since it seems too small of a topic to write a whole post about. Perhaps I can mix it in with another topic. I'll try my best when I can! 🙂

DEV Community

Explain Inheritance in JavaScript Classes Like I'm Five

Top comments (8)

Read next

TypeScript (and JSDoc) vs JavaScript

Angular vs. ReactJS: Which One Should You Pick for Your Next Project?

20 JavaScript Tricks Every Developer Must Know 🚀

React Performance Optimization Techniques: Memoization, Lazy Loading, and More