Inheritance — The most misunderstood word in javascript.

Mladjan Simonovic
Jul 15 · 5 min read

How many times have you heard about Prototypal Inheritance in Javascript?

Since it’s one of the fundamentals of the language you have probably heard of it thousands of times up until now. But what does inheritance actually means ? And is it correct to say that objects in javascript inherits properties from other objects ?

In this post i will try to explain why inheritance is actually a bad word for mechanism on which javascript prototype works.

We will take a look at two examples, one that explains inheritance in Object Oriented languages and shows how memory would look for certain model, and the other that will show how Javascript's "inheritance" work, how it looks in memory and how different it actually is from the OOP inheritance.

OOP Inheritance

In object-oriented programming, a class is a blueprint for creating objects (a particular data structure), providing initial values for state (member variables or attributes), and implementations of behavior (member functions or methods).

Inheritance describes a certain form of code organization and architecture — a way of modeling real world problem domains in our software. One class can inherit all of the properties of another class.A class that is used as the basis for inheritance is called a superclass or base class. A class that inherits from a superclass is called a subclass or derived class. The level of nesting subclasses is not limited in most programming languages.

It's important to understand that class is a descriptor of new type, class is the one that inherits properties and methods from another class, not object that is instantiated from that class. So when you instantiate the subclass, the object that is constructed contains all the properties and methods from all classes above it , and also has its own properties and methods.

Let's take a look at this pseudocode example and see how memory would look if code is executed in some OOP language (like Java or C#).

Pseudocode example of inheritance.

At this point in time we do not have any objects in memory, we have only defined our classes. Let's instantiate all of the 3 classes and see how memory looks.

Memory:

This is of course simplified model of how memory would look like, there would be couple more things in memory, depending on the language, but that's not the point and we won't talk about that now. What we wanted to see here is that inheritance is an action of copying. That fact is really important!

So, when class B inherits A line is executed, what will happen actually is that all properties that the definition of class A has, will be copied to class B. Later when you instantiate class B , constructed object will contain everything that is defined in class B, which is, all of the class A properties plus class B specific properties.

Prototypal inheritance

In javascript we don’t have classes but we don’t need them anyway because objects can be constructed without them , and we have means to connect one object with another, or in other words, we can set a prototype of an object to be some other object:

What we did here is we connected objectB with objectA. So now object A is a prototype of object B.

Most of the JS developers will tell you that in this case object B inherits everything from object A.

And it may be tempting to think like that, especially because of the fact that when you type B.nameA you will actually get "Objectc A" string value back. But, let's take a look at our memory and see what's in there.

As we can see , object B has only one property (his own), and nothing was copied over from object A. So is this inheritance then ? Can we say that object B "inherited" properties from object A ? I think not. What object B has is a connection to object A via prototype, and a way to ask for and get properties that it doesn't have. That 'way of asking' is often referred as "lookup algorithm".

Prototypal Inheritance can be really confusing and misleading especially for new developers. When you hear "Prototypal Inheritance in Javascript", it is really easy to get confused into thinking that "Inheritance" part of the name suggest that it works the same as in classical Object Oriented languages.As we saw, it is not. The idea behind this two models is different, and as we saw, memory looks completely different.

Much better name for it would be Prototypal Delegation ! Because when some object is asked to retrieve some property value, if it doesn't have that property, it will always delegate the task of retrieving that property value to its prototype.


Performance considerations.

Retrieval of property values is faster in OOP inheritance because all properties are on the object itself , while in Javascript a lookup algorithm needs to be executed for properties that are not on the object itself, and this of course takes additional time.

On the other side, delegation based languages are more memory efficient since objects are containing only their own properties, and not all of the properties from theirs super classes.

Conclusion

The name Prototypal Inheritance is used in this language probably because of the same reason the language is called JAVAscript , and because of that same reason we have a lot of unnecessary syntactic sugars and additions to language, like instanceof operator, new keyword (and the whole constructor call pattern), class keyword etc… which all can be (and are) confusing and misleading for new developers.

My goal here was to show, in a straightforward way, how big difference between OOP inheritance and javascript prototypal inheritance is.

The main difference is that in OOP , inheritance is the action of copying. One class copies everything from some other (base) class. In JS, we do not have classes, and inheritance is not action of copying, it is actually action of delegation. We have means to connect two objects together, so that one object can delegate its tasks(property value retrieval) to another object.

I hope this will help you understand these differences, and remove all the confusion you have with this buzz word in javascript community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade