Inheritance in JavaScript

Rupesh Mishra
May 4, 2017 · 5 min read

Detailed walk thorough of inheritance in JavaScript

Photo by Aleks Dorohovich on Unsplash

JavaScript does not have classes like other languages. It uses the concept of prototypes and prototype chaining for inheritance. In this post, we will discuss how we can achieve inheritance in JavaScript using Prototypes.

I recommend reading this article to have a thorough understanding of Prototypes in JavaScript.


Prototype Chaining

Prototype chaining means an object’s dunder proto or proto property will point to another object instead of pointing to the constructor function prototype. If the other object’s dunder proto or proto property points to another object it will result in the chain. This is called Prototype Chaining.

As shown in the below image, SubType object’s prototype property points to SuperType object. SuperType object’s prototype property points to the SuperSuperType object. This is called prototype chaining

Let’s implement prototype chaining

Above code defines two constructor functions, SuperType and SubType. By default, SubType.prototype has a constructor function which points to the constructor function itself and proto property which inherits the default object properties.

//Inherit the properties from SuperType
SubType.prototype = new SuperType();

Above line rewrites the default prototype or the dunder proto property of the SubType constructor function and makes SubType.prototype to point to an object of SuperType constructor function.

This means that all the properties and methods that exist on an instance of SuperType will now exist on SubType.prototype also. This means that now, SubType function has access to all the SuperType properties and methods.

//Add new property to SubType prototype
SubType.prototype.getSubAge = function(){
return this.age;
}

After the default prototype of SubType constructor function has been overwritten, by using the above line of code we add a new method getSubAge() on top of what was inherited from SuperType, to the prototype object of SubType constructor function.

Note: New methods must be added to the SubType after the inheritance because inheritance overwrites the existing prototype of SubType

Console output

Note: getSuperName() method remains on the SuperType.prototype object, but name property ends up on SubType.prototype. That’s because getSuperName() is a prototype method, and the property is an instance property. SubType.prototype is now an instance of SuperType, so the property is stored there. Also note that SubType.prototype.constructor points to SuperType, because the constructor property on the SubType.prototype was overwritten.

As all the properties of the super type prototype are shared among the child objects, if one child modifies the property of the super type prototype, other children also get affected. This issue has been explained in great details here

To fix this issue, we use the constructor to inherit the instance properties and prototype chaining to inherit methods and share properties

Let’s try to understand the code, we have defined a SuperType constructor function with firstName, lastName, and friends as instance properties, then we have defined a superName property on the prototype of SuperType.

Now, let’s look at how we have defined the SubType constructor function

Here, we define a SubType constructor function. Inside the SubType constructor function, we call the SuperType constructor function with call. Call executes the SuperType constructor function in the context of the object being created using the SubType constructor function. After inheriting the instance properties of the SuperType, we add one age property to the SubType constructor function

//Inherit methods and shared properties
SubType.prototype = new SuperType();

So far we have just inherited all the instance properties of the SuperType constructor function, but the shared properties and methods of the SuperType constructor function is still not inherited. We inherit them using the above lines of code.

Once the above lines of code are executed, we have inherited all the properties of the SuperType constructor function

When we execute the above line of code, all the three parameters (Virat, Kohli and 26) are passed to the SubType constructor function. SubType constructor function then calls SuperType constructor function using call SuperType.call(this, firstname, lastName) this here represent the subTypeObj1

SuperType constructor function is executed in the context of subTypeObj1 and add properties firstName, lastName, friends to the subTypeObj1 object After the return of SuperType.call(this, firstname, lastName), SubType constructor function adds a age property to subTypeObj1 object.

Thus as of now, there are properties with the subTypeObj1 object (firstName, lastName, and age). Currently, SubType constructor function has the following methods and shared properties in its prototype property:

  1. getSuperName()
  2. getSubAge

subTypeObj1 inherits all these properties from SubType constructor function.


Hacker Noon is how hackers start their afternoons. We’re a part of the @AMI family. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.

If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!

HackerNoon.com

how hackers start their afternoons.

Rupesh Mishra

Written by

Full Stack Developer | Freelance Blogger

HackerNoon.com

how hackers start their afternoons.

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