JavaScript Inheritance

The JavaScript inheritance is a mechanism that allows us to create new classes on the basis of already existing classes. 

It provides flexibility to the child class to reuse the methods and variables of a parent class.

The JavaScript extends keyword is used to create a child class on the basis of a parent class. 

It facilitates child class to acquire all the properties and behavior of its parent class.

Points to remember

• It maintains an IS-A relationship.
• The extends keyword is used in class expressions or class declarations.
• Using extends keyword, we can acquire all the properties and behavior of the inbuilt object as well as custom classes.
• We can also use a prototype-based approach to achieve inheritance.

JavaScript extends Example: inbuilt object

In this example, we extends Date object to display today's date.

1. <script>  
2. class Moment extends Date {  
3.   constructor() {  
4.     super();  
5.   }}  
6. var m=new Moment();  
7. document.writeln("Current date:")  
8. document.writeln(m.getDate()+"-"+(m.getMonth()+1)+"-"+m.getFullYear());  
9. </script>  

Output:

Current date: 31-8-2018

Let's see one more example to display the year value from the given date.

1. <script>  
2. class Moment extends Date {  
3.   constructor(year) {  
4.     super(year);  
5.   }}  
6. var m=new Moment("August 15, 1947 20:22:10");  
7. document.writeln("Year value:")  
8. document.writeln(m.getFullYear());  
9. </script>  

Output:

Year value: 1947

JavaScript extends Example: Custom class

In this example, we declare sub-class that extends the properties of its parent class.

1. <script>  
2. class Bike  
3. {  
4.   constructor()  
5.   {  
6.     this.company="Honda";  
7.   }  
8. }  
9. class Vehicle extends Bike {  
10.   constructor(name,price) {  
11.    super();  
12.     this.name=name;  
13.     this.price=price;  
14.   }   
15. }  
16. var v = new Vehicle("Shine","70000");  
17. document.writeln(v.company+" "+v.name+" "+v.price);  
18. </script>  

Output:

Honda Shine 70000

JavaScript extends Example: a Prototype-based approach

Here, we perform prototype-based inheritance. In this approach, there is no need to use class and extends keywords.

1. <script>  
2. //Constructor function  
3. function Bike(company)  
4. {  
5.     this.company=company;   
6. }  
7.   
8. Bike.prototype.getCompany=function()  
9. {  
10.   return this.company;  
11. }  
12. //Another constructor function  
13. function Vehicle(name,price) {  
14.  this.name=name;  
15.   this.price=price;  
16.   }   
17. var bike = new Bike("Honda");  
18. Vehicle.prototype=bike; //Now Bike treats as a parent of Vehicle.  
19. var vehicle=new Vehicle("Shine",70000);  
20. document.writeln(vehicle.getCompany()+" "+vehicle.name+" "+vehicle.price);  
21. </script>  

Output:

Honda Shine 70000