09/05/2023, 15:26 Inheritance in JavaScript.

Detailed walk thorough of inheritance… | by Rupesh Mishra | Medium

Open in app Get unlimited access

Rupesh Mishra Follow

May 4, 2017 · 5 min read · Listen

Save

Inheritance in JavaScript
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.

1.6K 10

https://medium.com/@happymishra66/inheritance-in-javascript-21d2b82ffa6f 1/12
09/05/2023, 15:26 Inheritance in JavaScript. Detailed walk thorough of inheritance… | by Rupesh Mishra | Medium

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

https://medium.com/@happymishra66/inheritance-in-javascript-21d2b82ffa6f 2/12
09/05/2023, 15:26 Inheritance in JavaScript. Detailed walk thorough of inheritance… | by Rupesh Mishra | Medium

https://medium.com/@happymishra66/inheritance-in-javascript-21d2b82ffa6f 3/12
09/05/2023, 15:26 Inheritance in JavaScript. Detailed walk thorough of inheritance… | by Rupesh Mishra | Medium

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.

https://medium.com/@happymishra66/inheritance-in-javascript-21d2b82ffa6f 4/12
09/05/2023, 15:26 Inheritance in JavaScript. Detailed walk thorough of inheritance… | by Rupesh Mishra | Medium

//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

https://medium.com/@happymishra66/inheritance-in-javascript-21d2b82ffa6f 5/12
09/05/2023, 15:26 Inheritance in JavaScript. Detailed walk thorough of inheritance… | by Rupesh Mishra | Medium

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.

Problems with prototype chaining

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

https://medium.com/@happymishra66/inheritance-in-javascript-21d2b82ffa6f 6/12
09/05/2023, 15:26 Inheritance in JavaScript. Detailed walk thorough of inheritance… | by Rupesh Mishra | Medium

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

https://medium.com/@happymishra66/inheritance-in-javascript-21d2b82ffa6f 7/12
09/05/2023, 15:26 Inheritance in JavaScript. Detailed walk thorough of inheritance… | by Rupesh Mishra | Medium

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

https://medium.com/@happymishra66/inheritance-in-javascript-21d2b82ffa6f 8/12
09/05/2023, 15:26 Inheritance in JavaScript. Detailed walk thorough of inheritance… | by Rupesh Mishra | Medium

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

https://medium.com/@happymishra66/inheritance-in-javascript-21d2b82ffa6f 9/12
09/05/2023, 15:26 Inheritance in JavaScript. Detailed walk thorough of inheritance… | by Rupesh Mishra | Medium

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.

If you like my articles and find them useful, feel free to buy me a coffee. Thanks!

https://medium.com/@happymishra66/inheritance-in-javascript-21d2b82ffa6f 10/12
09/05/2023, 15:26 Inheritance in JavaScript. Detailed walk thorough of inheritance… | by Rupesh Mishra | Medium

To get updates for my new stories, follow me on medium and twitter

Other articles:

1. Understanding Web Share APIs

2. Beginner’s guide to ReactJS

3. The Journey of JavaScript: from Downloading Scripts to Execution

4. Why Progressive Web Apps are great and how to build one

5. Let’s get this ‘this’ once and for all

6. Service Workers

7. Service Workers implementation

8. Execution Context in JavaScript

9. Virtual DOM in ReactJS

10. Prototypes in JavaScript

11. ‘this’ in JavaScript

12. Object.create in JavaScript

13. Inheritance in JavaScript

14. Create objects in JavaScript

15. Objects in JavaScript

16. Zip in Python

17. decorators in Python

18. Concatenating two lists in Python

19. lambda, map and filter in Python

20. List comprehensions in Python

https://medium.com/@happymishra66/inheritance-in-javascript-21d2b82ffa6f 11/12
09/05/2023, 15:26 Inheritance in JavaScript. Detailed walk thorough of inheritance… | by Rupesh Mishra | Medium

JavaScript Object Oriented Inheritance Prototype Prototype Chain

https://medium.com/@happymishra66/inheritance-in-javascript-21d2b82ffa6f 12/12