Photo by Clment H on Unsplash
super and extends In Action
ES6 Class and Subclass Syntax
The Gorilla class is a subclass or child class of Animal and it uses the extends keyword to set itself as a subclass.
However, the super keyword has been used in two different ways.Did you guys notice the same? In Gorilla?s constructor (line 23 of code) super is used as a ?function?. Whereas, Gorilla?s showVigour() (line 35) and dailyRoutine()(line 39) methods have used super as an ?object?.
The super keyword is used in two ways because of the following reasons:In line 23, the super keyword is used as a ?function? which calls the parent class Animal with the parameters passed to Gorilla. This is a key step to be carried out in order to make sure that Gorilla is an instance of Animal.In line numbers 35 and 39, super is used as an ?object? which refers to an Animal instance (parent class). The super keyword here is used to call the methods of the parent class Animal explicitly.
Read on Github
Read on Github
Both these references will help you to understand the next section really well.
The class declarations are compared in the following code snippet.
Class Declaration Comparison
The constructor function at line 3 is exactly same as line 14. function Animal is actually the constructor function here.
Methods As Part Of The Class
Method Declaration Comparison
The bigger difference comes when we try to extend the parent class with a subclass. Refer to the following code snippet:
Mapping extends keyword to traditional approach
We can see that the extends keyword takes care of extending the parent class Animal to the subclass in ES6 way, but the super keyword is also used here to make sure that Animal class is called via Gorilla?s constructor so as to inherit the characteristics and behaviors of the Animal. Here, the super keyword is used as a function to call Animal class for initializing Gorilla. Here, super is equivalent to Animal.call(this, ?).
To make the same thing happen traditionally, a few additional steps are required. A function for the subclass Gorilla needs to be created as per line 10. Since the Gorilla is going to inherit the characteristics and behaviors of Animal it is a must to call the Animal?s constructor function inside Gorilla?s constructor as shown in line 11, this line is comparable to line 4 and does the same exact thing. Only we need to pass ?this? reference explicitly to the Animal class to ensure the call was made from Gorilla class.
Furthermore, we need to set the Gorilla function?s prototype as a new object created from the Animal?s prototype as shown on line 11. In doing this, we are overriding Gorilla?s prototype object. Hence, on the following line 15, we need to set the constructor of Gorilla explicitly. These steps take care of setting the Gorilla class as a subclass of Animal class.
We already saw one mapping of super keyword i.e., line 4 and 19 in the following snippet where super is used as a function.
Mapping super keyword to traditional approach
The keyword super can also be used as an instance of the parent class as per lines 8 and 12 to call Animal class specific details.
To achieve the same, in traditional style lines 26 and 30 show how it?s done.The super instance is actually ParentClassName.prototype.methodName.call(this, ?) .Hence, a lot of code needs to be written to make sure the Parent class? methods are called explicitly.
I?m pretty sure that you guys will start using ES6?s class and inheritance features right away without the blink of an eye as you now know the level of complexity the traditional way provides. Also, Chrome and Firefox support ES6 as of now, but in order to make all browsers support ES6 features, a babel transpiler will be required to convert all the ES6 code into ES5 code.
Happy hacking! ?
Other Posts By Me
Find me at: https://firstname.lastname@example.org
? Web Development
- Progressive Web App Shell: The Key To Loading Your Site Under 1 Second!
- Introduction To Polyfills & Their Usage
? Life Event
- Udacity?s Google Mobile Web Scholarship Challenge and its glorious effects!