The extends key phrase is utilized in class declarations and expressions to create a category that acts as a toddler of one other class.
class x extends y {
}
Right here, x is the baby class and y is the dad or mum class. The prolong key phrase acts because the hyperlink between the 2 courses.
The extends key phrase can even join a category to a built-in object or a subclass (a category inside one other class).
Please observe that the primary class should be the kid class and never a dad or mum class or a built-in object.
The Prototype Property
Any constructor with the dad or mum class prototype property could be thought of a candidate for the dad or mum property.
Observe: The prototype shouldn’t be an object or null.
The prototype refers to an object linked to each perform and built-in object by default in JavaScript and could be simply accessed and modified however it’s not seen.
The tremendous() technique
Simply as a toddler in actual life inherits the dad or mum’s properties, the properties of a dad or mum in JavaScript work the identical manner.
On this case, the kid class inherits all the dad or mum class’s strategies.
Why is inheritance in JavaScript vital?
To keep away from repetition of code; inheritance helps with the reusability of code, whereby a category inherits the strategies of a dad or mum class as defined above.
The tremendous() technique and its relationship with inheritance
(https://cdn.hashnode.com/res/hashnode/picture/add/v1657913152909/DVSFDHQS1.png align=”left”)
The tremendous () technique refers back to the dad or mum class. It helps get entry to the dad or mum‘s properties and strategies. In easy phrases, it helps make inheritance potential.
It does this by calling the constructor of the dad or mum class throughout the baby class.
The superKeyword can entry properties.
- On an object, literal
- On a category prototype
- Invoke a superclass constructor.
How precisely do the tremendous () technique and the prolong key phrase work in code?
<physique>
<p id="job"></p>
<script>
class Satisfaction {
constructor(lion) {
this.title = lion;
}
technique() {
return this.title + "is the king of the savannah and "
}
}
// prolong key phrase
class Cub extends Satisfaction {
constructor(lion, simba) {
// Observe: The tremendous() technique should be known as earlier than the ‘this’ key phrase excluding the tremendous() technique or utilizing it after the ‘.this’ key phrase will consequence to a reference error
tremendous(lion); //refers back to the parentClass
this.cub = simba;
}
reply(){
return this.technique() + this.cub + " is his son "
}
}
theKing = new Cub("mufasa " , "simba");
doc.getElementById("job").innerHTML = theKing.reply();
</script>
</physique>
</html>
Issues to notice when utilizing the prolong key phrase
- On the appropriate hand facet, you need to use any expression that evaluates to a constructor.
// Y is the right-hand facet on this case.
x extends y {
}
-
The extends key phrase units the prototype for each the kid class and its prototype.
Right here it permits the inheritance of the static properties and the prototype properties. -
You should utilize prolong with predefined objects like arrays, dates, math, and strings.
To get a full grasp on JavaScript courses please take a look at my first article on JavaScript courses
