Relawan kami belum menerjemahkan artikel ini ke dalam Bahasa Indonesia. Bergabunglah dan bantu kami menyelesaikan pekerjaan ini!
Anda juga bisa membaca artikel dalam English (US).

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 is used. The super 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.height = this.width = Math.sqrt(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 an error

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(); // TypeError: "prop" is read-only
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 Latest Draft (ECMA-262)
The definition of 'super' in that specification.
Living Standard  

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic Support42 (Yes)45 No (Yes) (Yes)
FeatureAndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic Support4242 (Yes)45 No (Yes) (Yes)

See also

Tag Dokumen dan Kontributor

 Terakhir diperbarui oleh: fscholz,