JavaScript Inheritance

JavaScript inheritance is the method through which the objects inherit the properties and the methods from the other objects. It enables code reuse and structuring of relationships between objects, creating a hierarchy where a child object can access features of its parent object. Inheritance in JavaScript can be achieved in the following ways:

Prototypal Inheritance

Objects inherit from other objects through their prototypes. Each object has a prototype, properties, and methods inherited from that prototype. The methods through which prototypal inheritance is achieved in JavaScript are as follows.

Example: The below code example demonstrates Inheritance and method overriding in JavaScript.

Javascript

function Animal(name) {
    this.name = name;
}

Animal.prototype.sound = function() {
    console.log("Some generic sound");
};

function Dog(name, breed) {
    Animal.call(this, name);
    this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.sound = function() {
    console.log("Woof! Woof!");
};

const myDog = new Dog("Buddy", "Labrador");
myDog.sound();  // Outputs: Woof! Woof!

Output

Woof! Woof!

Classical Inheritance

Introduced in ECMAScript6 (ES6) with the class keyword. Uses a class-based approach similar to other programming languages like Java or C++. Following are the methods through which class-based inheritance is achieved in JavaScript:

Inheritance using extend keyword

JavaScript ES6 classes support the extended keyword to perform class inheritance.

Example: Demonstrating class inheritance and method overloading in JavaScript.

Javascript

class automobile {
    constructor(name, cc) {
        this.name = name;
        this.cc = cc;
    }
    engine() {
        console.log(`${this.name}
      has ${this.cc} engine`);
    }
}

class car extends automobile {
    engine() {
        console.log(this.name,
            "has ", this.cc, "cc engine");
    }
}

let carz = new car('Rex', "1149");
carz.engine();

Output

Rex has  1149 cc engine

Inheritance using the super keyword

Super keyword is used in classes to call the properties and methods of the parent class.

Example: Using super keyword for method invocation and inheritance in JavaScript.

Javascript

// Inheritance using super keyword in JS
class Automobile {
    constructor(name) {
        this.name = name;
    }

    engine() {
        console.log(this.name,
            "has ", this.cc, "cc engine");
    }
}

class Car extends Automobile {
    constructor(name, cc) {
        super(name);

        // Additional properties for
        // the Car class
        this.cc = cc;
    }

    engine() {
        // the 'engine' method of the parent
        // class using 'super'
        super.engine();

        console.log(this.name,
            "has ", this.cc, "cc engine");
    }
}

let carz = new Car('Rexton', '1500');
carz.engine();

Output

Rexton has  1500 cc engine
Rexton has  1500 cc engine

Inheritance in static members

Static members belong to their own class and not to their instances because inheritance also applies to the static members of the class.

Example: Demonstrating the inheritance in static members in JavaScript.

Javascript

// Inheritance in static members
class Automobile {
    static staticMethod() {
        return 'Automobile static method';
    }
}

class car extends Automobile {
    static staticMethod() {
        return 'Car static method';
    }
}

console.log(Automobile.staticMethod());
console.log(car.staticMethod());

Output

Automobile static method
Car static method

Functional Inheritance

Objects inherit properties and methods from other objects through function constructors. It uses functions to create objects and establish relationships between them. The methods through which functional inheritance is achieved in JavaScript are as follows:

Constructor overriding

In JavaScript, when we want to extend a class we might want to override the constructor using the super keyword which invokes the parent constructor.

Example: Demonstrating inheritance and method overriding in the JavaScript classes.

Javascript

function Animal(name) {
    const obj = {};
    obj.name = name;

    obj.sound = function() {
        console.log("Some generic sound");
    };

    return obj;
}

function Dog(name, breed) {
    const obj = Animal(name);
    obj.breed = breed;

    obj.sound = function() {
        console.log("Woof! Woof!");
    };

    return obj;
}

const myDog = Dog("Buddy", "Labrador");
myDog.sound();  // Outputs: Woof! Woof!

Output

Woof! Woof!

Inheritance from Built-in data types

One can extend the functionality of the built-in JavaScript types like “Array”, and “Error” to create custom classes.

Example: myArr subclass extending the built-in array class in JavaScript.

Javascript

class myArr extends Array {
  isEmpty() {
    return this.length > 0;
  }
}

let arr = new myArr(10, 20, 30);
console.log(arr.isEmpty());

Output

true