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.
<!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:
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.