JavaScript Class Inheritance

JavaScript Class Inheritance

In this tutorial, you will learn about JavaScript class inheritance with the assistance of examples.

Class Inheritance

To create a class inheritance, use the extends keyword.

A class created with a class inheritance inherits all the strategies from another class:

Inheritance enables you to characterize a class that takes all the usefulness from a parent class and allows you to add more.

Using class inheritance, a class can acquire all the strategies and properties of another class.

Inheritance is a useful element that allows code reusability.

To use class inheritance, you use the extends watchword. For instance,

// parent class
class Person { 
    constructor(name) {
        this.name = name;
    }

    greet() {
        console.log(`Hello ${this.name}`);
    }
}

// inheriting parent class
class Student extends Person {

}

let student1 = new Student('Sohail');
student1.greet();

Output

Hello Sohail

In the above example, the Student class acquires all the techniques and properties of the Person class. Consequently, the Student class will presently have the name property and the greet() method.

At that point, we accessed the greet() technique for Student class by making a student1 object.

---

JavaScript super() keyword

The super catchphrase used inside a child class signifies its parent class. For instance,

// parent class
class Person { 
    constructor(name) {
        this.name = name;
    }

    greet() {
        console.log(`Hello ${this.name}`);
    }
}

// inheriting parent class
class Student extends Person {

    constructor(name) {
    
        console.log("Creating student class");
        
        // call the super class constructor and pass in the name parameter
        super(name);
    }

}

let student1 = new Student('Sohail');
student1.greet();

Here, super inside Student class alludes to the Person class. Thus, when the constructor of the Student class is called, it likewise calls the constructor of the Person class which assigns a name property to it.

---

Overriding Method or Property

In the event that a child class has a similar strategy or property name as that of the parent class, it will use the technique and property of the child class. This concept is called method overriding. For instance,

// parent class
class Person { 
    constructor(name) {
        this.name = name;
        this.occupation = "unemployed";
    }
    
    greet() {
        console.log(`Hello ${this.name}.`);
    }
 
}

// inheriting parent class
class Student extends Person {

    constructor(name) {
        
        // call the super class constructor and pass in the name parameter
        super(name);
        
        // Overriding an occupation property
        this.occupation = 'Student';
    }
    
    // overriding Person's method
    greet() {
        console.log(`Hello student ${this.name}.`);
        console.log('occupation: ' + this.occupation);
    }
}

let p = new Student('Sohail');
p.greet();

Output

Hello student Sohail.
occupation: Student

Here, the occupation property and the greet() method are present in parent Person class and the child Student class. Hence, the Student class overrides the occupation property and the greet() method.

---

Uses of Inheritance

• Since a child class can acquire all the functionalities of the parent’s class, this allows code reusability.
• When usefulness is created, you can just acquire it. No compelling reason to waste time. This takes into consideration cleaner code and simpler to keep up.
• Since you can likewise add your own functionalities in the child class, you can acquire just the valuable functionalities and characterize other required highlights.

---

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.

JS ES6