The super keyword is used to call functions on an object's parent.
The super.prop and super[expr] expressions are valid in any method definition in both classes and object literals.
Syntax
super([arguments]); // calls the parent constructor. super.functionOnParent([arguments]);
Description
When used in a constructor, the super keyword appears alone and must be used before the this keyword can be used. This keyword can also be used to call functions on a parent object.
Example
Using super in classes
This code snippet is taken from the classes sample (live demo).
class Polygon {
constructor(height, width) {
this.name = 'Polygon';
this.height = height;
this.width = width;
}
sayName() {
console.log('Hi, I am a ', this.name + '.');
}
}
class Square extends Polygon {
constructor(length) {
this.height; // ReferenceError, super needs to be called first!
// Here, it calls the parent class' constructor with lengths
// provided for the Polygon's width and height
super(length, length);
// Note: In derived classes, super() must be called before you
// can use 'this'. Leaving this out will cause a reference error.
this.name = 'Square';
}
get area() {
return this.height * this.width;
}
set area(value) {
this.area = value;
}
}
Super-calling static methods
You are also able to call super on static methods.
class Human {
constructor() {}
static ping() {
return 'ping';
}
}
class Computer extends Human {
constructor() {}
static pingpong() {
return super.ping() + ' pong';
}
}
Computer.pingpong(); // 'ping pong'
Deleting super properties will throw
You can not use the delete operator and super.prop or super[expr] to delete a parent class' property, it will throw a {{jsxref("ReferenceError")}}.
class Base {
constructor() {}
foo() {}
}
class Derived {
constructor() {}
delete() {
delete super.foo;
}
}
new Derived().delete(); // ReferenceError: invalid delete involving 'super'.
Super.prop can not overwrite non-writable properties
When defining non-writable properties with e.g. {{jsxref("Object.defineProperty")}}, super can not overwrite the value of the property.
class X {
constructor() {
Object.defineProperty(this, "prop", {
configurable: true,
writable: false,
value: 1
});
}
f() {
super.prop = 2;
}
}
var x = new X();
x.f();
console.log(x.prop); // 1
Using super.prop in object literals
Super can also be used in the object initializer / literal notation. In this example, two objects define a method. In the second object, super calls the first object's method. This works with the help of {{jsxref("Object.setPrototypeOf()")}} with which we are able to set the prototype of obj2 to obj1, so that super is able to find method1 on obj1.
var obj1 = {
method1() {
console.log("method 1");
}
}
var obj2 = {
method2() {
super.method1();
}
}
Object.setPrototypeOf(obj2, obj1);
obj2.method2(); // logs "method 1"
Specifications
| Specification | Status | Comment |
|---|---|---|
| {{SpecName('ES6', '#sec-super-keyword', 'super')}} | {{Spec2('ES6')}} | Initial definition. |
| {{SpecName('ESDraft', '#sec-super-keyword', 'super')}} | {{Spec2('ESDraft')}} |
Browser compatibility
{{CompatibilityTable}}
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | {{CompatChrome(42.0)}} | {{CompatNightly("firefox")}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
| Feature | Android | Android Webview | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|
| Basic support | {{CompatUnknown}} | {{CompatChrome(42.0)}} | {{CompatNightly("firefox")}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatChrome(42.0)}} |
Gecko specific note
super() does not work as expected for built-in prototypes.