Types of inheritance in JavaScript

In JavaScript, there are several ways to implement inheritance. The different types of inheritance in JavaScript – prototypal inheritance, constructor inheritance, and class inheritance.

1. Prototypal Inheritance: JavaScript uses prototypal inheritance as its primary mechanism for object-oriented programming. Every object in JavaScript has a prototype, and it inherits properties and methods from its prototype. You can create new objects based on an existing object by using the Object.create() method or by manipulating the prototype chain manually.

Creating a child object inheriting from a parent object’s prototype:

var childObject = Object.create(parentObject);

2. Constructor Inheritance: Constructor functions are used to create objects with specific properties and methods. You can achieve inheritance by using the prototype property of a constructor function to add properties and methods that will be inherited by instances created with the new keyword. The constructor property of the instances points back to the original constructor function.

The syntax for defining a parent constructor function:

function ParentConstructor(arg1, arg2) {
  // Parent properties and methods
}

The syntax for defining a child constructor function that inherits from the parent constructor:

function ChildConstructor(arg1, arg2, arg3) {
  ParentConstructor.call(this, arg1, arg2);  // Call the parent constructor
  // Child properties and methods
}

3. Class Inheritance: ES6 introduced the class syntax, which provides a more familiar syntax for implementing inheritance in JavaScript. You can use the extends keyword to create a class that inherits from another class. The super keyword is used to call the parent class’s constructor and access its methods. Class inheritance in JavaScript is actually built on top of prototypal inheritance.

The syntax for defining a parent class:

class ParentClass {
  constructor(arg1, arg2) {
    // Parent properties and methods
  }
}

The syntax for defining a child class that inherits from the parent class:

class ChildClass extends ParentClass {
  constructor(arg1, arg2, arg3) {
    super(arg1, arg2);  // Call the parent constructor
    // Child properties and methods
  }
}

These syntax examples demonstrate how to implement each type of inheritance in JavaScript.

Types of inheritance in JavaScript example

Here are examples of each type of inheritance in JavaScript:

Prototypal Inheritance:

// Parent object
var Animal = {
  type: 'Unknown',
  speak: function() {
    console.log('The ' + this.type + ' makes a sound.');
  }
};

// Child object inheriting from Animal
var Cat = Object.create(Animal);
Cat.type = 'Cat';
Cat.meow = function() {
  console.log('Meow!');
};

Cat.speak(); // Output: The Cat makes a sound.
Cat.meow();  // Output: Meow!

Constructor Inheritance:

// Parent constructor
function Animal(type) {
  this.type = type;
}

Animal.prototype.speak = function() {
  console.log(`The ${this.type} makes a sound.`);
};

// Child constructor inheriting from Animal
function Cat() {
  Animal.call(this, 'Cat');
}

Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;
Cat.prototype.meow = function() {
  console.log('Meow!');
};

var cat = new Cat();
cat.speak(); // Output: The Cat makes a sound.
cat.meow();  // Output: Meow!

Class Inheritance:

class Animal {
  constructor(type) {
    this.type = type;
  }

  speak() {
    console.log(`The ${this.type} makes a sound.`);
  }
}

class Cat extends Animal {
  constructor() {
    super('Cat');
  }

  meow() {
    console.log('Meow!');
  }
}

const cat = new Cat();
cat.speak(); // Output: The Cat makes a sound.
cat.meow();  // Output: Meow!

Output:

These examples demonstrate the implementation of prototypal, constructor, and class inheritance in JavaScript. Each type offers different approaches to achieve inheritance, allowing you to choose the one that suits your needs and coding style.

Each type of inheritance has its own syntax and approach, but they all serve the purpose of creating relationships between objects and allowing them to inherit properties and behaviors from other objects.

Comment if you have any doubts or suggestions on this Js inheritance topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version