JavaScript

Class Inheritance in JavaScript

Class Inheritance in JavaScript is a valuable feature that permits code re-usability. By utilizing the class inheritance, the child class will have all access to the properties and methods of the parent class in a JavaScript program. It also allows you to create a child class that inherits the functionality of the parent class while enabling you to override it.

This write-up will discuss class inheritance in JavaScript. We will also explain shadowing methods and inheriting static methods using the class inheritance in JavaScript. Moreover, each of the specified sections will be demonstrated with the help of examples. So, let’s start!

Class Inheritance in JavaScript

The mechanism in which one class inherits another class’s methods and properties is known as Class Inheritance. The “Base” or the “Parent” class is the one whose methods and properties are inherited, whereas the “Derived” or the “Child” class inherits the functionality of the parent class:

The “extends” keyword is used to establish the class inheritance between parent and child class, and the “super” keyword is utilized to access the methods and properties of the parent class.

Example: Class Inheritance in JavaScript

In the below-given example, we will define two classes: Person and Employee, and create the class inheritance between them by utilizing the “super” and “extends” keywords.

First of all, we will define a parent or base class named “Person” having a constructor and a showName() method:

class Person {

    constructor(name) {

        this.name = name;

    }

    showName() {

        console.log('My name is ' + this.name);

    }

}

In the next step, we will create the child class named “Employee” which will have a constructor and a “displayStatus()” method. To establish a class inheritance relationship with the “Person” class, you have to use the “extends” keyword and specify the name of the parent class, which is “Person” in our case. After doing so, the “Employee” class will inherit the “Person” class’s methods and properties.

Also, in the “Employee” class constructor, we will invoke “super()” to call the constructor of the “Person” class while passing the “name” argument:

class Employee extends Person {

    constructor(name) {

        super(name);

    }

    displayStatus() {

        console.log('I am an Employee');

    }

}

Now, we will create an “employee” object of the “Employee” class and will pass “Jack” as name arguments in the constructor:

let employee = new Employee('Jack');

The created “employee” object inherited all methods and property of the “Person” class. Now, we will invoke the “showName()” method of the “Person” class with it:

employee.showName();

Lastly, we will call the “displayStatus()” method of the “Employee” class object:

employee.displayStatus();

Have a look at the below-given image of the provided code and its output:

As super() initializes the “this” object, you must invoke it first before accessing it. However, if you try to access “this” before executing super(), it will give you an error.

For instance, to initialize the “age” property of the “Employee” class in its constructor, we will call the “super()” first and then access the “this” object:

class Employee extends Person {

constructor(name, age) {

super(name);

this.age = age;

}

display() {

console.log("I am an Employee");

}

getAge() {

return this.age;

}

}

Now, at the time of creating the “employee1” object of the “Employee” class, we will pass “Jack” as name and “29” as age argument to the constructor:

let employee1 = new Employee('Jack', 29);

Then, after initialization, we will invoke the “getAge()” method of our Employee class to view the age property value:

console.log(employee1.getAge());

Check out the output of the above-given example:

Shadowing methods using Class Inheritance in JavaScript

Methods having the same name can be defined in both parent and child classes. In such a situation, when you invoke the method of a child class object, it will shadow the method present in the parent class.

For instance, the below-given “Student” class is the child class of the “Person” and is redefining the “showName()” method:

class Student extends Person {

    constructor() {

        super('Jack');

    }

  showName() {

        console.log('My name is Jack');

    }

}

Now, the “showName()” method exists in the child class and also in the parent class. So, when you call the “showName()” with the “Student” class object, it will invoke the showName() method defined in the child class:

let student1 = new Student();

student1.showName();

Here is the example code with its output:

If you want to invoke the parent class method having the same name, in the child class, you have to write out “super.methodName(arguments)”. For instance, we will call the “showName()” method of the “Person” (parent) class by adding the line “super.showName()” in our child class showName() method:

showName() {

        super.showName();

        console.log('child function');

    }

Now, when the child class object invokes the “showName()”, it will go through the body of the child class showName() method, then call the parent class showName() method. After completing the execution of the parent class showName() method, the control will be moved back to the showName() method of the child class:

let student1 = new Student();

student1.showName();

In the following image, you can see the output of the “showName()” method:

Inheriting Static Members using Class Inheritance in JavaScript

The child class can also inherit the static methods and properties of the parent class. Let us help you understand this concept by demonstrating an example.

In the following example, we will define a static “helloWorld()” method in the same “Person” parent class which will simply output the “Hello World” string upon calling it:

class Person{

    constructor(name) {

        this.name = name;

    }

    showName() {

        console.log('My name is ' + this.name);

    }


    static helloWorld() {

        console.log('Hello World');

    }

}

In the next step, we will create “Employee” as a child class of the “Person”, so it can inherit the method and properties of the parent class, including the “helloWorld()” static method:

class Employee extends Person {

        displayStatus() {

        console.log('I am an Employee');

    }

}

Next, we will invoke the helloWorld() static method through the “Employee” class:

Employee.helloWorld();

The Employee.helloWorld() method will be executed same as the Person.helloWorld() method:

Conclusion:

You can use the extends keyword for creating a class inheritance in JavaScript and the super keyword to refer to the parent class. With the class inheritance mechanism in JavaScript, the child class can access the parent class’s methods and properties. This write-up discussed class inheritance in JavaScript. We have also explained shadowing methods and inheriting static methods using the class inheritance in JavaScript. Moreover, each of the specified sections is demonstrated with the help of examples.

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.