Explain Inheritance in JavaScript Classes Like I'm Five

twitter logo ・1 min read

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

twitter logo DISCUSS (9)
markdown guide

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.


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 ...).


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.

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

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!


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


awesome explanation , much appreciated dood 👌


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


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! 🙂

Classic DEV Post from Nov 15 '18

Don't be a mockup developer

Many times as a mobile developer I have to work on apps without the API ready that was crucial for the feature I was implementing. Either the backend was developed by another team that was not entirely in sync with us or our backend team had no chance to implement those endpoints earlier. For this reason, I was not able to satisfy the Definition of Done but it does not mean that I have implemented the UI only.

Njoku Godson profile image