super

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2016.

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

super.propsuper[expr] 表達有效在 method definitionclassesobject literals.

語法

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

描述

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

範例

在類別中使用 super

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

js
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 靜態方法

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

js
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.

js
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 不能複寫這個屬性的值.

js
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 可以發現 method1obj1裡被找到.

js
var obj1 = {
  method1() {
    console.log("method 1");
  },
};

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

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

規格

Specification
ECMAScript Language Specification
# sec-super-keyword

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
super

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

參考