The JavaScript super keyword is used to access and call functions on an object’s parent. This is mainly used when you have to access a variable, method, or constructor in the base class from the derived class.
super(arguments); // calls the parent constructor (only inside the constructor)
super.parentMethod(arguments); // calls a parent methodHere’s how the super keyword is typically used:
Superclass and Subclass:
You have a superclass (parent class) and a subclass (child class) set up using the class syntax. The subclass extends the superclass to inherit its properties and methods.
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a sound.`);
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name); // Call the superclass constructor
this.breed = breed;
}
speak() {
super.speak(); // Call the superclass method
console.log(`${this.name} barks.`);
}
}
Calling the Superclass Constructor:
Inside the subclass constructor, you can use super() to call the constructor of the superclass. This is important to initialize properties inherited from the superclass.
- Calling the Superclass Method: In a method of the subclass, you can use super.methodName() to call the method with the same name in the superclass. This allows you to extend or modify the behavior of the inherited method while still using the parent’s implementation. In the example above, the
Dogsubclass’sspeakmethod first callssuper.speak()to use thespeakmethod from theAnimalsuperclass and then adds its own behavior.
Here’s how you can use the classes defined above:
const myDog = new Dog("Buddy", "Golden Retriever");
myDog.speak(); // Output: Buddy makes a sound.
// Buddy barks.
JavaScript super keyword
A simple example code has a class named “Model” which will inherit the methods from the “Car” class, by using the extends keyword.
Gets access to the parent’s properties and methods by calling the super() method in the constructor method.
<!DOCTYPE html>
<html>
<body>
<script>
class Car {
constructor(brand) {
this.carname = brand;
}
present() {
return this.carname;
}
}
class Model extends Car {
constructor(brand, mod) {
super(brand);
this.model = mod;
}
show() {
return this.present() + this.model;
}
}
mycar = new Model("BMW", "X1");
console.log(mycar.show());
</script>
</body>
</html> Output:
Calling super in static methods
<script>
class Rectangle {
constructor() {}
static getDescription() {
return 'Rectangles have 4 sides';
}
}
class Square extends Rectangle {
constructor() {
super()
}
static getDescription() {
return super.getDescription() + ' and are all equal';
}
}
console.log(Square.getDescription())
</script>Output: Rectangles have 4 sides and are all equal
How do super() all the existing arguments?
Answer:
If the child and parent take the same arguments, use rest and spread:
class Child extends Parent {
constructor(...args) {
super(...args);
}
}
If the constructor signatures are the same, this will work for any Child regardless of what Parent’s arguments are. This also works for multiple inherited classes, eg:
class GrandChild extends Child {
constructor(...args) {
super(...args);
}
}But long inheritance chains are usually an antipattern in JS. I’d recommend avoiding them in most cases unless there’s an excellent reason for it.
If the child has an extra trailing argument, passing it to the parent if the parent doesn’t define such an argument will work just fine.
If the child has an extra leading argument, use:
class Child extends Parent {
constructor(childArg, ...args) {
super(...args);
}
}Source: stackoverflow.com
Do comment if you have any doubts or suggestions on this JS super keyword.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version