Inheriting from a class quickly raises a practical question: how do you add something to the parent behavior without copying what it already does. Redefining a method wipes it out entirely, which is rarely the intent.
super is the keyword that lets you complete rather than replace. It is also the only way to bring an instance into existence inside a child class.
Definition
super means the parent class, inside a class declared with extends. It is used in two ways: followed by parentheses in the constructor, or followed by a dot and a method name everywhere else.
class Product {
constructor(name, price) {
this.name = name;
this.price = price;
}
label() { return this.name + ": " + this.price + " euros"; }
}
class SaleProduct extends Product {
constructor(name, price, discount) {
super(name, price); // before any use of this
this.discount = discount;
}
label() {
return super.label() + " (-" + this.discount + "%)";
}
}
console.log(new SaleProduct("Keyboard", 79, 20).label());
// Keyboard: 79 euros (-20%)The child label method reuses the parent version and adds a note to it. The day the parent label format changes, the sale version follows on its own, which a copy and paste would never have allowed.
Where it is used, and what it does
| Form | What it does |
|---|---|
| super(...) in the constructor | Runs the parent constructor and brings this into existence |
| super.method() in a method | Calls the parent version while keeping the current instance |
| super.method() in a static member | Calls the static version of the parent class |
The second row hides an important detail: the parent method really does run against the current instance, so this inside it means the actual object.
The order is enforced in the constructor
A child class that declares its own constructor must call super() before touching this. This is not a style convention, it is a rule of the language.
class Product {
constructor(name) { this.name = name; }
}
class Broken extends Product {
constructor(name) {
this.name = name; // too early: the object does not exist yet
super(name);
}
}
try {
new Broken("Mouse");
} catch (error) {
console.log(error.name); // ReferenceError
}The reason is mechanical: the call to the parent is what builds the object. Until it has happened there is nothing to fill in, and the engine refuses the read rather than letting an empty value through.
The keyword exists only inside a class and inside the shorthand methods of an object literal. Written in an ordinary function, it produces a syntax error, before anything has even run.
Frequently asked questions
Must the constructor always call super?
As soon as the class inherits from another and declares its own constructor, yes, the call is mandatory. If the child writes no constructor at all, the language adds one implicitly that forwards the arguments it received. That is a good reason not to write a constructor when it would merely repeat the parent one.
Can a grandparent method be called?
Not directly: the keyword only goes up one level. Across three levels, each class calls its immediate parent and the chain propagates naturally. A need to skip a level almost always signals a hierarchy that has grown too deep, worth revisiting before reaching for a trick.
What is this worth just before the call?
Nothing at all, and that is precisely what the error above means. The variable exists but sits in a zone where any read is refused, until the parent constructor has run. Once that call is done, reading it becomes ordinary again for the whole rest of the child constructor.