JavaScript

Types of Inheritance in JavaScript

In JavaScript, Inheritance is a mechanism that permits an object to inherit all of the methods and properties of its parent or base object. It is also considered a crucial component of OOP (Object Oriented Programming).

The idea behind implementing Inheritance in JavaScript is to add new objects that are derived from existing objects. When the newly created object becomes a child or derived object of a parent class, it can inherit all of its methods and properties.

This write-up will discuss types of Inheritance in JavaScript. So, let’s start!

Types of Inheritance in JavaScript

JavaScript supports the following types of Inheritance:

Blank diagram (1)

We will discuss each of the mentioned Inheritance types in the following sections.

Prototypal Inheritance In JavaScript

Prototypal Inheritance” enables you to access properties and methods of a parent object. In this type of inheritance, a newly created object is permitted to inherit the properties and method of an existing object. Typically, “Object.getPrototypeOf()” and “Object.setPrototypeOf()” can be used to get and set an object’s Prototype; however, ES6 standardize the “__proto__” accessor property that can be utilized for the similar purpose.

Syntax of Prototypal Inheritance In JavaScript

ChildObject.__proto__ = ParentObject

Here “ChildObject” represents the newly created object which inherits the properties and methods of “ParentObject”.

Example: How to implement Prototypal Inheritance In JavaScript

First of all, we will create two objects named “Bike” and “Venom” and add a “color” property for the “Bike” object and a “name” property for the “Venom” object:

let Bike= {

color: "Blue",

};

let Venom = {

name: "Venom",

};

By using “__proto__” property of the “Venom” object, we will inherit the properties of the “Bike” object:

Venom.__proto__ = Bike;

Lastly, we will display the “own” (Venom.name) and “inherited” (Venom.color) property values of “Venom” object:

console.log("This is a " + Venom.color + " " + Venom.name);

Pseudoclassical Inheritance in JavaScript

The idea of implementing the “Pseudoclassical Inheritance” is to create an “inherited” function that assists in associating the child class to the parent class.

For this purpose, the Pseudoclassical Inheritance utilizes:

  • A “constructor()” function
  • new” operator for creating instances
  • A “prototype” property that establishes the chain of inheritance and is assigned to the constructor function so that all instances inherit the specified property.

Now, check out the below-given example to clearly understand the Pseudoclassical Inheritance.

Example: How to implement Pseudoclassical Inheritance in JavaScript

We will define a constructor function named “Bike()”:

function Bike(){

this.name = 'Bike';

}

Next, we will create an “info()” function that will be inherited by the child objects of “Bike”:

Bike.prototype.info= function(){

console.log('This is a ' + this.name );

};

In our program, we will declare another object named “Venom,” and utilize the “Bike.call()” method for invoking the Bike constructor():

function Venom() {

Bike.call(this);

this.name = 'Venom';

}

Then, we will use the “prototype” property to implement the Pseudoclassical inheritance between “Venom” object and “Bike” object:

Venom.prototype = Object.create(Bike.prototype);

Venom.prototype.constructor = Bike;

In the last step, the “new“operator is utilized for creating the two instances, “venom” and “bike“:

var venom= new Venom();

var bike= new Bike();

After doing so, the “info()” function is invoked for both instances:

venom.info();

bike.info();

As you can see from the below-given output, the Pseudoclassical Inheritance is implemented, and the instance “venom” inherited and executed the “info()” function successfully :

Functional Inheritance in JavaScript

The mechanism of inheriting properties by applying an augmenting function (function having generic functionality) to an object instance is known as “Functional Inheritance”. The defined augmenting function employs dynamic object extension to add additional properties and methods to an object instance. You can also use its “closure scope” to keep some data private.

Example: How to implement Functional Inheritance in JavaScript

In this example, we will create a “Bike” object having a inner object named “x”:

function Bike(data) {

var x= {};

x.name = data.name;

return x;

}

Then, we will create a child object named “Venom” which establishes the inheritance with the “Bike” class. This child object will comprises an augmenting function “info” which can have the access to the “name” property of the “x” object:

function Venom(data) {

var x= Bike(data);

x.info= function () {

return "This is a " + x.name + " Bike";

};

return x;

}

To implement the Functional Inheritance, we will create “venom” as a child instance and pass the value of the “name” property as “data” argument:

var venom= Venom({ name: "Venom" });

The given “console.log()” method will fetch the value of the “x.name” property from the parent “Bike” object and print it on the console:

console.log(venom.info());

Output

That was all about the types of inheritance in JavaScript. You can further explore them according to your preferences.

Conclusion

Prototypal Inheritance, Pseudoclassical Inheritance, and Functional Inheritance are different types of Inheritance in JavaScript. A Prototypal type of Inheritance is implemented using the “__proto__” property, whereas, in Functional Inheritance, an augmenting function is defined which accesses the properties of the parent class. Moreover, the Pseudoclassical Inheritance utilizes a constructor() function, “new” operator, and prototype property to embed inheritance between two objects. This write-up discussed different types of Inheritance in JavaScript.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.