super() calls a superclass constructor from a derived class constructor. Call it before using this. JavaScript also has super.method() and super[property] forms, which look up inherited properties rather than calling a constructor.
What does super() do?
In a class declared with extends, super(...args) invokes the base class constructor and passes it the arguments in parentheses. The base constructor can use those arguments to initialize the inherited part of the new instance.
For example, Rectangle expects a height and width, so Square passes the same length for both:
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
area() {
return this.height * this.width;
}
}
class Square extends Rectangle {
constructor(length) {
super(length, length);
this.name = "Square";
}
}The call to super(length, length) initializes the base-class portion first. The derived constructor can then assign this.name.
Why must super() come before this?
A derived constructor cannot use this until it has called super(). That call initializes the instance through the base constructor; afterward, the derived constructor can access and add to the instance. Trying to read or assign this first causes an error. See MDN’s explanation of derived constructor execution order.
How is super() different from super.method()?
These are two distinct uses of the special super syntax. A standalone super is not a variable or a value you can read directly.
Rank #2
| Form | Purpose | Where it applies |
|---|---|---|
super(...args) |
Calls the base-class constructor with the supplied arguments. | In a derived class constructor. |
super.prop or super[expr] |
Looks up a property through the superclass side. | In a method context that supports super, including class methods and object-literal methods. |
For instance, a child method can extend a parent method’s result:
class Base {
describe() {
return "base description";
}
}
class Child extends Base {
describe() {
return `${super.describe()} plus child details`;
}
}super.describe() looks up describe on the superclass side, but the method runs with the current object as its receiver. It does not create or call a separate parent instance. Property lookup with super is also supported in static methods and object-literal methods when used in a valid syntax context. MDN documents the forms and their behavior in its super reference.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsRank #3
Where is super() valid?
A super() constructor call belongs in a derived class constructor, typically one in a class declared with extends. It is invalid in a base-class constructor or an unrelated ordinary function. A nested arrow function inside a derived constructor is an allowed context, but that does not make the call valid in arbitrary functions. MDN describes these cases in its guide to the invalid super() placement error.
Quick Recap
Best Value
- If the class has no superclass, do not add
super(). - If the constructor extends another class, call
super()before accessingthis. - Pass the arguments the base constructor needs, such as
super(length, length)when it expects two dimensions. - To use an inherited method or property, use the property form, such as
super.describe(), in a supported method context.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
