Our volunteers haven't translated this article into Türkçe yet. Join us and help get the job done!
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 ReferenceError
.
class Base { constructor() {} foo() {} } class Derived extends Base { 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. 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 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 |
---|---|---|
ECMAScript 2015 (6th Edition, ECMA-262) The definition of 'super' in that specification. |
Standard | Initial definition. |
ECMAScript 2017 Draft (ECMA-262) The definition of 'super' in that specification. |
Draft |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 42.0 | 45 (45) | ? | ? | ? |
Feature | Android | Android Webview | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Basic support | ? | 42.0 | 45.0 (45) | ? | ? | ? | 42.0 |
Gecko specific notes
super()
does not yet work as expected for built-in prototypes.