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

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 的共通部分。

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 可以發現 method1 在 obj1裡被找到.

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

BCD tables only load in the browser

參考