Home >Web Front-end >JS Tutorial >Subclassing and inheritance in ES6 explained

Subclassing and inheritance in ES6 explained

王林forward: 2023-09-05 12:37:021027browse

In JavaScript, developers use prototypes to inherit from another function in ES5. In ES6, classes introduced in JavaScript can be used for inheritance like other programming languages.

What are subclasses and inheritance?

As the word subclass represents, it is a subclass of another class. We can use inheritance to create or derive subclasses from superclasses, and we can call classes as superclasses, classes derived from them, and subclasses as derived classes.

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

grammar

You can inherit a subclass from a superclass by following the following syntax.

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 used the class keyword in the above syntax to create a class. Additionally, users can also see how we can inherit subclasses from superclasses using the extends keyword.

Benefits of inheritance

Before proceeding with this tutorial, let us understand the different benefits of inheritance.

Inheritance allows us to reuse code from super classes.
Inheritance saves time because we don’t need to write the same code often.
Furthermore, we can use inheritance to generate maintainable code with proper structure.
We can use inheritance to override super class methods and implement them again in subclasses.

Let us understand inheritance through real life examples. In this way we can understand inheritance correctly.

Example

In the following example, we create the house class. The Two_BHK class inherits the house class, which means that the Two_BHK class contains all the properties and methods of the house class.

We overridden the get_total_rooms() method of the house class and implemented our own method in the 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 true purpose of inheritance. You can observe in the above example how we can reuse code through inheritance. Additionally, it provides a clear structure as demonstrated by the example above. Furthermore, we can define the structure of the method in the super class and implement it in the subclass. So, the super class provides a clear method structure and we can implement them in the subclasses.

Example

In this example, we use the constructor of the class to initialize the properties of the class. Additionally, we have used the super() keyword to call the constructor of the super class from the subclass.

Remember that you need to write the super() keyword in the subclass constructor before initializing any properties of the subclass.

<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 learned about inheritance in this tutorial. Additionally, this tutorial teaches us to override methods in subclasses and call the superclass's constructor from the subclass to initialize all superclass properties.

The above is the detailed content of Subclassing and inheritance in ES6 explained. For more information, please follow other related articles on the PHP Chinese website!

JavaScript es6 子类构造函数继承 class 对象

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to change tr attribute in jqueryNext article：How to change tr attribute in jquery

See more

Subclassing and inheritance in ES6 explained

What are subclasses and inheritance?

grammar

Benefits of inheritance

Example

Example

Related articles