Inheritance in JavaScript
The concept of inheritance in JavaScript allows the child class to inherit
the properties and methods of the parent class. Inheritance is also a
fundamental concept of object-oriented programming
like encapsulation and polymorphism.
Sometimes, you must add the properties and methods of the one class
into another. For example, you have created a general class for the bike
containing the same properties and methods for each bike. After that, you
create a separate class for the bike "Honda", and you need to add all
properties and methods to the "Honda" class. You can achieve it using
inheritance.
Before ECMAScript 6 (ES6), the object's prototype was used for
inheritance, but in ES6, the 'extends' keyword was introduced to inherit
classes.
The following terminologies are used in this chapter.
Parent class − It is a class whose properties are inherited by other
classes.
Child class − It is a class that inherits the properties of the other
class.
Advertisement: 0:19
JavaScript Single Class Inheritance
You can use the 'extends' keyword to inherit the parent class properties
into the child class. In single class inheritance only a single class inherits
the properties of another class.
Syntax
You can follow the syntax below for the single-class inheritance.
class childClass extends parentClass {
// Child class body
In the above syntax, you can replace the 'childClass' with the name of the
child class and 'parentClass' with the name of the parent class.
Example: Single Class Inheritance
In the example below, the 'Bike' class is a parent class, and the 'Suzuki'
class is a child class. The suzuki class inherits the properties of the Bike
class.
The Bike class contains the constructor() method initializing the gears
property and the getGears() method returning the value of the gears
property.
The suzuki class contains the constructor() method to initialize the brand
property and getBrand() method, returning the value of the brand
property.
We have created an object of the 'suzuki' class. Using the 'suzuki' class
instance, we invoke the getBrand() and getGears() methods.
<html>
<body>
<div id = "output1">The brand of the bike is: </div>
<div id = "output2">Total gears in the bike is: </div>
<script>
// Parent class
class Bike {
constructor() {
this.gear = 5;
getGears() {
return this.gear;
// Child class
class suzuki extends Bike {
constructor() {
super();
this.brand = "Yamaha"
getBrand() {
return this.brand;
const suzukiBike = new suzuki();
document.getElementById("output1").innerHTML +=
suzukiBike.getBrand();
document.getElementById("output2").innerHTML +=
suzukiBike.getGears();
</script>
</body>
</html>
Output
The brand of the bike is: Yamaha
Total gears in the bike is: 5
In this way, you can use the properties and methods of the parent class
through the instance of the child class.
JavaScript super() Keyword
In the above example, we have initialized the 'gear' property of the Bike
class with a static value. In real life, you need to initialize it with the
dynamic value according to the model of the bike.
Now, the question is how to initialize the properties of the parent class
from the child class. The solution is a super() keyword.
The super() keyword is used to invoke the method or access the properties
of the parent class in the child class. By default, the super() keyword
invokes the constructor function of the parent class. You can also pass the
parameters to the super() keyword to pass it to the constructor of the
parent class.
Example: Using super() keyword to initialize the parent class properties
In the example below, suzuki class extends the Bike class.
The Bike class contains the constructor, taking gears as parameters and,
using it, initializes the gears property.
The 'suzuki' class also contains the constructor, taking a brand and gears
as a parameter. Using the brand parameter, it initializes the brand
property and passes the gears parameter as an argument of the super()
keyword.
After that, we create an object of the 'suzuki' class and pass the brand and
gears as an argument of the constructor. You can see the dynamic value
of the brand and gear property in the output.
<html>
<body>
<div id = "output1">The brand of the bike is: </div>
<div id = "output2">Total gears in the bike is: </div>
<script>
// Parent class
class Bike {
constructor(gears) {
this.gears = gears;
// Child class
class suzuki extends Bike {
constructor(brand, gears) {
super(gears);
this.brand = brand;
const suzukiBike = new suzuki("Suzuki", 4);
document.getElementById("output1").innerHTML +=
suzukiBike.brand;
document.getElementById("output2").innerHTML +=
suzukiBike.gears;
</script>
</body>
</html>
Output
The brand of the bike is: Suzuki
Total gears in the bike is: 4
In this way, you can dynamically initialize the properties of the parent
class from the child class.
JavaScript Multilevel Inheritance
Multilevel inheritance is a type of inheritance in JavaScript. In multilevel
inheritance, one class inherits the properties of another class, and other
classes inherit current class properties.
Syntax
Users can follow the syntax below for the multilevel inheritance.
class A {
class B extends A {
class C extends B {
In the above syntax, the C class inherits the B class, and the B class
inherits the A class.
Example
In the example below, the Honda class inherits the Bike class. The Shine
class inherits the Honda class.
We use the super() keyword in each class to invoke the parent class's
constructor () and initialize its properties.
We are accessing the properties of the Bike class using the instance of the
Shine class, as it indirectly inherits the properties of the Bike class.
<html>
<body>
<p id = "output"> </p>
<script>
// Parent class
class Bike {
constructor(gears) {
this.gears = gears;
// Child class
class Honda extends Bike {
constructor(brand, gears) {
super(gears);
this.brand = brand;
class Shine extends Honda {
constructor(model, brand, gears) {
super(brand, gears);
this.model = model;
const newBike = new Shine("Shine", "Honda", 5);
document.getElementById("output").innerHTML = `The $
{newBike.model} model of the ${newBike.brand} brand has total
${newBike.gears} gears.`;
</script>
</body>
</html>
Output
The Shine model of the Honda brand has total 5 gears.
JavaScript Hierarchical Inheritance
In JavaScript hierarchical inheritance, one class is inherited by multiple
classes.
Syntax
The syntax of JYou can follow the syntax below for the hierarchical
inheritance.
class A {
class B extends A {
Class C extends A {
In the above syntax, B and C both classes inherit the properties of the A
class.
Example
In the example below, the Bike class contains the gears property and is
initialized using the constructor() method.
The Honda class extends the Bike class. The constructor() method of the
Honda class initializes the properties of the Bike class using the super()
keyword and model property of itself.
The Suzuki class inherits the Bike class properties. The constructor()
method of the Suzuki class also initializes the Bike class properties and
the other two properties of itself.
After that, we create objects of both Honda and Suzuki classes and access
their properties.
<html>
<body>
<p id = "output1"> Honda Bike Object: </p>
<p id = "output2"> Suzuki Bike Object: </p>
<script>
// Parent class
class Bike {
constructor(gears) {
this.gears = gears;
// Child class
class Honda extends Bike {
constructor(model, gears) {
super(gears);
this.model = model;
// Child class
class Suzuki extends Bike {
constructor(model, color, gears) {
super(gears);
this.model = model;
this.color = color;
const h_Bike = new Honda("Shine", 5);
const s_Bike = new Suzuki("Zx6", "Blue", 6);
document.getElementById("output1").innerHTML +=
JSON.stringify(h_Bike);
document.getElementById("output2").innerHTML +=
JSON.stringify(s_Bike);
</script>
</body>
</html>
Output
Honda Bike Object: {"gears":5,"model":"Shine"}
Suzuki Bike Object: {"gears":6,"model":"Zx6","color":"Blue"}
Inheriting Static Members of the Class
In JavaScript, you can invoke the static methods of the parent class using
the super keyword in the child class. Outside the child class, you can use
the child class name to invoke the static methods of the parent and child
class.
Example
In the example below, the Bike class contains the getDefaultBrand() static
method. The Honda class also contains the Bikename() static method.
In the Bikename() method, we invoke the getDefaultBrand() method of the
parent class using the 'super' keyword.
Also, we execute the Bikename() method using the 'Honda' class name.
<html>
<body>
<p id = "output">The bike name is: </p>
<script>
// Parent class
class Bike {
constructor(gears) {
this.gears = gears;
static getDefaultBrand() {
return "Yamaha";
// Child class
class Honda extends Bike {
constructor(model, gears) {
super(gears);
this.model = model;
static BikeName() {
return super.getDefaultBrand() + ", X6";
document.getElementById("output").innerHTML +=
Honda.BikeName();
</script>
</body>
</html>
Output
The bike name is: Yamaha, X6
When you execute any method using the 'super' keyword in the multilevel
inheritance, the class finds the methods in the parent class. If the method
is not found in the parent class, it finds in the parent's parent class, and
so on.
JavaScript Prototype Based Inheritance
You can also update or extend the prototype of the class to inherit the
properties of the multiple classes to the single class. So, it is also called
multiple inheritance.
Syntax
You can follow the syntax below to use prototype-based inheritance.
Child.prototype = Instance of parent class
In the above syntax, we assign the parent class instance to the child
object's prototype.
Example: JavaScript Prototype Based Inheritance
In the example below, Bike() is an object constructor that initializes the
brand property.
After that, we add the getBrand() method to the prototype of the Bike()
function.
Next, we have created the Vehicle() object constructor and instance of the
Bike() constructor.
After that, we update the prototype of the Vehicle class with an instance of
the Bike. Here, Vehicle works as a child class and Bike as a parent class.
We access the getBrand() method of the Bike() function's prototype using
the instance of the Vehicle () function.
<html>
<body>
<p id = "output1">Bike brand: </p>
<p id = "output2">Bike Price: </p>
<script>
function Bike(brand) {
this.brand = brand;
Bike.prototype.getBrand = function () {
return this.brand;
//Another constructor function
function Vehicle(price) {
this.price = price;
const newBike = new Bike("Yamaha");
Vehicle.prototype = newBike; //Now Bike treats as a parent of
Vehicle.
const vehicle = new Vehicle(100000);
document.getElementById("output1").innerHTML +=
vehicle.getBrand();
document.getElementById("output2").innerHTML +=
vehicle.price;
</script>
</body>
</html>
Output
Bike brand: Yamaha
Bike Price: 100000
You can't access the private members to the parent class in the child
class.
Benefits of Inheritance
Here, we will learn the benefits of the inheritance concept in JavaScript.
Code reusability − The child class can inherit the properties of the
parent class. So, it is the best way to reuse the parent class code.
Functionality extension − You can add new properties and
methods to extend the parent class functionality in each child class.
Code maintenance − It is easier to maintain a code as you can
divide the code into sub-classes.
Multilevel and hierarchical inheritance allows you to combine data
together.