When we work with classes in JavaScript, it's common to use the super keyword.
In this post I want to clarify what's it useful for.
Suppose you have a class Car:
class Car {
}
and in this class we have a constructor() method:
class Car {
constructor() {
console.log('This is a car')
}
}
The constructor method is special because it is executed when the class is instantiated:
const myCar = new Car() //'This is a car'
You can have a Tesla class that extends the Car class:
class Tesla extends Car {
}
The Tesla class inherited all the methods and properties of Car, including the constructor method.
We can create an instance of the Tesla class, creating a new myCar object:
const myCar = new Tesla()
And the original constructor in Car is still executed, because Tesla does not have one of its own.
We can override the constructor() method in the Tesla class:
class Tesla extends Car {
constructor() {
console.log('This is a Tesla')
}
}
and
const myCar = new Tesla()
will print This is a Tesla .
In the constructor() method we can also call super() to invoke the same method in the parent class:
class Tesla extends Car {
constructor() {
super()
console.log('This is a Tesla')
}
}
Calling
const myCar = new Tesla()
will now execute 2 console logs. First the one defined in the Car class constructor, the second the one defined in the Tesla class constructor:
'This is a car'
'This is a Tesla'
Note that super() can only be called in the constructor, not in other methods.
And we can pass in any parameter, if the constructor accepts parameters.