The concept of inheriting something from another class is called JavaScript Inheritance. During evolution, a child may inherit the properties of their parents, or a new species may inherit the property of an earlier species.

In the definition above, we can deduce that the latter entity inherits the properties of the earlier entity. Furthermore, we can also deduce that the latter entity includes several features that were either absent in the preceding one or whose execution has been improved.

In Javascript, inheritance is described as a class's ability to derive attributes and traits from another class while also retaining its own characteristics.

The notion of inheritance occurs in programming as well. In javascript, inheritance is divided into two parts:

• Child class: A class that inherits the characteristics of another class is referred to as a child class.
• Parent class: The parent class is the class whose characteristics are inherited.

Basic javascript objects in different forms are aggregated here

Class JavaScript Inheritance

This (inheritance) helps you to define a class that inherits every functionality of a parent class and adds new capabilities.

A class can acquire all of the attributes and methods of another class via class inheritance.

Inheritance is a helpful feature that enables code reuse.

The extends keyword is used to implement class inheritance. As an example,

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

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

// inheriting parent class
class Student extends Person {

}

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

In the example above, the Student class inherited all of the attributes and properties of the Person class. As a result, the Student class now has a name property as well as the greet() method.

Then, by constructing a student1 object, we were able to access the greet() function of the Student class.

JavaScript super() keyword in JavaScript Inheritance

The super () keyword in Js is used to invoke functions from an object's parent class. When we create objects from the child class, we must also give the parameters to the parent class. The super() function does this. It uses the characteristics of the parent class. Understanding Javascript object will make the whole explanation clearer. Click here to master Javascript object

Syntax

super(param);

It is inserted within the child class's constructor, and the param is the parameter(s) requested by the Parent class.

Example

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

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

// inheriting the parent class
class Student extends Person {

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

}

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

super within the student class refers to the Person class.  As a result, when the constructor of the Student class is invoked, it also invokes the constructor of the Person class and assigns it a name property.

Overriding Property or Method in JavaScript Inheritance

So far, we've seen how to inherit properties between different classes. If a child class is similar in terms of property or method name as the parent class, the parent class will use the property and method of the child class. This phenomenon is what we call "Method overriding."

Example

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

// inheriting parent class
class Student extends Person {

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

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

The parent Person class as well as the child Student class both have the occupation property as well as the greet() function. As a result, the occupation property, as well as the greet() function, are overridden by the Student class.

Uses of Inheritance

The following are uses of JavaScript Inheritance:

• JavaScript Inheritance aids in the organization of data in a hierarchical structure.
• Javascript inheritance allows you to inherit attributes from another class, rendering class definitions less complicated.
• JavaScript Inheritance also facilitates code debugging.
• JavaScript Inheritance allows you to add your own properties within child classes as well; this allows you to be able to override some parent class methods while inheriting those that are required.