Open In App

How to implement inheritance in ES6 ?

Last Updated : 08 Nov, 2021
Comments
Improve
Suggest changes
3 Likes
Like
Report

In this article, we will know how inheritance is implemented in es6. The ES6 JavaScript supports Object-Oriented programming components such as Object, Class and Methods. Further in Classes we can implement inheritance to make child inherits all methods of Parent Class. This can be done using the extends and super keywords.

We use the extends keyword to implement the inheritance in ES6. The class to be extended is called a base class or parent class. The class that extends the base class or parent class is called the derived class or child class. The super() method in the constructor is used to access all parent's properties and methods that are used by the derived class.

The below example will demonstrate the use of the extends and super keywords.

Example: Let us create a Shop class that will inherit the methods from the parent "Mall" class.

HTML 
<!DOCTYPE html>
<html>
<body>
    <h2>JavaScript Class Inheritance</h2>
    <p id="demo"></p>


    <script>
        class Mall {
            constructor(shopname) {
                this.shopname = shopname;
            }
            shopispresent() {
                return this.shopname + 
                  ' is present in the  ';
            }
        }

        class Shop extends Mall {
            constructor(name, mallname) {
                super(name);
                this.mallname = mallname;
            }
            showshop() {
                return this.shopispresent() +
                  this.mallname;
            }
        }

        let newMall = new Shop(
          "Domino", "Select City Walk Mall"
        );
        document.getElementById("demo")
                .innerHTML = newMall.showshop();
    </script>
</body>
</html>

Output:

Image

Explanation:

  • In the above example, the super keyword is used as a “function” which calls the parent class Mall with the parameter passed to Shop. This is a key step to be carried out in order to make sure that  Shop is an instance of  Mall.
  • On the other hand, extends keyword is used to set Shop as a subclass or child class of Mall. The use of extends is a must to set some class as a child of other class.

F

faizamu19
Improve
Article Tags :

Explore

Lightbox