Explain sub-classes and inheritance in ES6

Javascript Web Development Front End Technology

In JavaScript, developers used the prototype to inherit the function with another function in ES5. In the ES6, classes introduced in JavaScript can be used for inheritance as other programming language does.

What are sub-classes and inheritance?

As the subclass word represents, it is a child class of another class. We can use inheritance to create or derive a subclass from the superclass, and we can call the class to a superclass from which we derive the class and the sub-class to the derived class.

The subclass contains all the properties and methods of the superclass, and we can access it using the sub-classes object. You can use the "extend" keyword to derive the class from the superclass.

Syntax

You can follow the syntax below to inherit the sub-class from the superclass.

Class superClass {
   // members and methods of the superClass
}
class subClass extends superClass {
   // it contains all members and methods of the superclass
   // define the properties of the subclass
}

We have used the class keyword in the above syntax to create a class. Also, users can see how we can use the extends keyword to inherit the subClass from the superClass.

Benefits of inheritance

Before we proceed with the tutorial, let’s understand the different benefits of inheritance.

The inheritance allows us to reuse the code of the superclass.
The inheritance saves time, as we don’t need to write the same code often.
Also, we can produce maintainable code with the proper structure using inheritance.
We can override the superclass methods using inheritance and implement them again in the sub-class.

Let’s understand inheritance via real-life examples. So we can understand the inheritance properly.

Example

In the example below, we have created the house class. The two_BHK class inherits the house class, which means the Two_BHK class contains all properties and methods of the house class.

We have overridden the get_total_rooms() method of the house class and implemented their own in Two_BHK class.

<html>
<body>
   <h2>Using the <i> extends </i> keyword to inherit classes in ES6  </h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById("output");
      class house {
         color = "blue";
         get_total_rooms() {
            output.innerHTML += "House has a default room. </br>";
         }
      }
      // extended the house class via two_BHK class
      class Two_BHK extends house {
         // new members of two_BHK class
         is_galary = false;
         // overriding the get_total_rooms() method of house class
         get_total_rooms() {
            output.innerHTML += "Flat has a total of two rooms. </br>";
         }
      }
      // creating the objects of the different classes and invoking the 
      //get_total_rooms() method by taking the object as a reference. 
      let house1 = new house();
      house1.get_total_rooms();
      let house2 = new Two_BHK();
      house2.get_total_rooms();
   </script>
</body>
</html>

Now, you can understand the real use of inheritance. You can observe in the above example how we have reused the code using inheritance. Also, it provides the clear structure that the above example demonstrates. Furthermore, we can define the structure of the method in the super-class and implement it in the sub-class. So, the superclass provides a clear structure of methods, and we can implement them in the sub-class.

Example

In this example, we have used the class's constructor to initialize the class's properties. Also, we have used the super() keyword to invoke the super-class's constructor from the sub-class.

You can keep in mind that you need to write the super() keyword in the sub-class constructor before we initialize any property of the sub-class.

<html>
<body>
   <h2>Using the <i> extends </i> keyword to inherit classes in ES6 </h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById("output");
      // creating the superclass
      class superClass {
         // constructor of the super-class
         constructor(param1, param2) {
            this.prop1 = param1;
            this.prop2 = param2;
         }
      }
      // Creating the sub-class
      class subClass extends superClass {
         // constructor of subClass
         constructor(param1, param2, param3) {
            // calling the constructor of the super-class
            super(param1, param2);
            this.prop3 = param3;
         }
      }
      // creating the object of the subClass
      let object = new subClass("1000", 20, false);
      output.innerHTML +=
      "The value of prop1 in the subClass class is " + object.prop1 + "</br>";
      output.innerHTML +=
      "The value of prop2 in subClass class is " + object.prop2 + "</br>";
      output.innerHTML +=
      "The value of prop3 in subClass class is " + object.prop3 + "</br>";
   </script>
</body>
</html>

We have learned about inheritance in this tutorial. Also, this tutorial taught us to override a method in the subclass and invoke the superclass's constructor from the subclass to initialize all superclass properties.