So far, we discussed how to declare classes and the types of members classes can support. A major use of a class is to serve as a template to create other subclasses. When you create a child class from a class, you derive properties of the parent class and extend the parent class by adding more features of its own.
Let's look at the following de facto example of inheritance:
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(this.name + ' generic noise'),
}
}
class Cat extends Animal {
speak() {
console.log(this.name + ' says Meow.'),
}
}
var c = new Cat('Grace'),
c.speak();//"Grace says Meow."
Here, Animal is the base class and the Cat class is derived from the class Animal. The extend clause allows you to create a subclass of an existing class. This example demonstrates the syntax of subclassing. Let's enhance this example a bit more by writing the following code:
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(this.name + ' generic noise'),
}
}
class Cat extends Animal {
speak() {
console.log(this.name + ' says Meow.'),
}
}
class Lion extends Cat {
speak() {
super.speak();
console.log(this.name + ' Roars....'),
}
}
var l = new Lion('Lenny'),
l.speak();
//"Lenny says Meow."
//"Lenny Roar...."
Here, we are using the super keyword to call functions from the parent class. The following are the three ways in which the super keyword can be used:
- You can use
super (<params>)as a function call to invoke the constructor of the parent class - You can use
super.<parentClassMethod>to access the parent class methods - You can use
super.<parentClassProp>to access the parent class properties
In the derive class constructor, you must call the super() method before you can use, this keyword; for example, the following piece of code will fail:
class Base {}
class Derive extends Base {
constructor(name){
this.name = name; //'this' is not allowed before super()
}
}
You can't implicitly leave a derived constructor with a super() method as an error:
class Base {}
class Derive extends Base {
constructor(){ //missing super() call in constructor
}
}
If you don't provide a constructor for the base class, the following constructor is used:
constructor() {}
For the derived classes, the default constructor is as follows:
constructor(...args){
super(...args);
}
JavaScript supports only single inheritance. At most, a class can have one superclass. This is limiting when you want to create class hierarchies but also want to inherit tool methods from different sources.
Let's say we have a scenario where we have a Person class, and we create a subclass, Employee:
class Person {}
class Employee extends Person{}
We also want to inherit functions from two utility classes, BackgroundCheck-this class does employee background checks-and Onboard-this class handles employee onboarding processes, such as printing badges and so on:
class BackgroundCheck {
check() {}
}
class Onboard {
printBadge() { }
}
Both BackgroundCheck and Onboard classes are templates, and their functionality will be used multiple times. Such templates (abstract subclasses) are called mixins.
As multiple inheritance is not possible in JavaScript, we will employ a different technique to achieve this. A popular way of implementing mixins in ES6 is to write a function with a superclass as an input and a subclass extending that superclass as the output, for example:
class Person {}
const BackgroundCheck = Tools => class extends Tools {
check() {}
};
const Onboard = Tools => class extends Tools {
printBadge() {}
};
class Employee extends BackgroundCheck(Onboard(Person)){
}
This essentially means that Employee is a subclass of BackgroundCheck, which in turn is a subclass of Onboard, which in turn is a subclass of Person.