super

super 關鍵字被使用於通過函式存取父層

 super.prop 與 super[expr] 表達有效在 method definition 與 classes 與 object literals.

語法

super([arguments]); // calls the parent constructor.
super.functionOnParent([arguments]);

描述

當使用建構子,super 關鍵字必須出現在this 關鍵字之前使用,super 關鍵字也可以使用在呼叫函式與父對象

範例

在類別中使用 super 

這個程式碼片段從 classes sample (live demo). 這裏的 super() 被呼叫去避免複製到建構子的 Rectangle 與 Square 的共通部分。

class Rectangle {
  constructor(height, width) {
    this.name = 'Rectangle';
    this.height = height;
    this.width = width;
  }
  sayName() {
    console.log('Hi, I am a ', this.name + '.');
  }
  get area() {
    return this.height * this.width;
  }
  set area(value) {
    this.area = value;
  }
}

class Square extends Rectangle {
  constructor(length) {
    this.height; // ReferenceError, super needs to be called first!

    // Here, it calls the parent class's constructor with lengths
    // provided for the Rectangle'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';
  }
}

Super-calling 靜態方法

你也可以使用在靜態方法.

class Rectangle {
  constructor() {}
  static logNbSides() {
    return 'I have 4 sides';
  }
}

class Square extends Rectangle {
  constructor() {}
  static logDescription() {
    return super.logNbSides() + ' which are all equal';
  }
}
Square.logDescription(); // 'I have 4 sides which are all equal'

刪除 super 屬性將拋出錯誤

你不能使用 delete operator 以及 super.prop 以及 super[expr] 去刪除父層的類別屬性, 不然他會丟出一個錯誤 ReferenceError.

class Base {
  constructor() {}
  foo() {}
}
class Derived extends Base {
  constructor() {}
  delete() {
    delete super.foo; // this is bad
  }
}

new Derived().delete(); // ReferenceError: invalid delete involving 'super'. 

super.prop 不能複寫在不能複寫的屬性

當定義不可寫屬性,例如 Object.defineProperty, super 不能複寫這個屬性的值.

class X {
  constructor() {
    Object.defineProperty(this, 'prop', {
      configurable: true,
      writable: false, 
      value: 1
    });
  }
}

class Y extends X {
  constructor() {
    super();
  }
  foo() {
    super.prop = 2;   // Cannot overwrite the value.
  }
}

var y = new Y();
y.foo(); // TypeError: "prop" is read-only
console.log(y.prop); // 1

使用 super.prop 在對象符號

Super 可以使用在 object initializer / literal 符號. 在這個範例, 有兩個對象定義在一個方法. 在第二個對象裡面, super 呼叫了第一個對象的方法. 這個動作幫助 Object.setPrototypeOf() 讓我們可以設定原型 obj2 to obj1, 所以 super 可以發現 method1 在 obj1裡被找到.

var obj1 = {
  method1() {
    console.log('method 1');
  }
}

var obj2 = {
  method2() {
    super.method1();
  }
}

Object.setPrototypeOf(obj2, obj1);
obj2.method2(); // logs "method 1"

規格

Specification Status Comment
ECMAScript Latest Draft (ECMA-262)
The definition of 'super' in that specification.
Draft
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'super' in that specification.
Standard Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
superChrome Full support 42Edge Full support 13Firefox Full support 45IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support 42Chrome Android Full support 42Firefox Android Full support 45Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 4.0nodejs Full support Yes

Legend

Full support  
Full support
No support  
No support

參考