DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Wonuola
Wonuola

Posted on

JavaScript Classes. Pt 2

The extends keyword is used in class declarations and expressions to create a class that acts as a child of another class.

class x extends y {
}
Enter fullscreen mode Exit fullscreen mode

Here, x is the child class and y is the parent class. The extend keyword acts as the link between the two classes.
The extends keyword can also connect a class to a built-in object or a subclass (a class inside another class).

Please note that the first class must be the child class and not a parent class or a built-in object.

The Prototype Property

Any constructor with the parent class prototype property can be considered a candidate for the parent property.

Note: The prototype should not be an object or null.

The prototype refers to an object linked to every function and built-in object by default in JavaScript and can be easily accessed and modified but it is not visible.

The super() method

Just as a child in real life inherits the parent's properties, the properties of a parent in JavaScript work the same way.

In this case, the child class inherits all of the parent class's methods.

Why is inheritance in JavaScript necessary?

To avoid repetition of code; inheritance helps with the reusability of code, whereby a class inherits the methods of a parent class as explained above.

The super() method and its relationship with inheritance

 super() method illustration(https://cdn.hashnode.com/res/hashnode/image/upload/v1657913152909/DVSFDHQS1.png align="left")

The super () method refers to the parent class. It helps get access to the parentβ€˜s properties and methods. In simple words, it helps make inheritance possible.
It does this by calling the constructor of the parent class within the child class.

The superKeyword can access properties.

  • On an object, literal
  • On a class prototype
  • Invoke a superclass constructor.

super() method illustration - two

How exactly do the super () method and the extend keyword work in code?

<body>
<p id="task"></p>
<script>
class Pride {
constructor(lion) {
this.name = lion;
}
method() { 
return this.name + "is the king of the savannah and "
}
}

// extend keyword

class Cub extends Pride {
constructor(lion, simba) {

// Note: The super() method must be called before the β€˜this’ keyword excluding the super() method or using it after the β€˜.this’ keyword will result to a reference error
super(lion); //refers to the parentClass
this.cub = simba; 
}
answer(){
return  this.method() + this.cub + " is his son " 
}
}

theKing = new Cub("mufasa " , "simba");  
document.getElementById("task").innerHTML = theKing.answer();
</script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Things to note when using the extend keyword

  • On the right hand side, you can use any expression that evaluates to a constructor.
// Y is the right-hand side in this case.

x extends y {

}
Enter fullscreen mode Exit fullscreen mode
  • The extends keyword sets the prototype for both the child class and its prototype.
    Here it allows the inheritance of the static properties and the prototype properties.

  • You can use extend with predefined objects like arrays, dates, math, and strings.

To get a full grasp on JavaScript classes please check out my first article on JavaScript classes

Top comments (0)

🌚 Life is too short to browse without dark mode