From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- .../reference/operators/super/index.html | 179 +++++++++++++++++++++ 1 file changed, 179 insertions(+) create mode 100644 files/zh-tw/web/javascript/reference/operators/super/index.html (limited to 'files/zh-tw/web/javascript/reference/operators/super') diff --git a/files/zh-tw/web/javascript/reference/operators/super/index.html b/files/zh-tw/web/javascript/reference/operators/super/index.html new file mode 100644 index 0000000000..d02c8a0a91 --- /dev/null +++ b/files/zh-tw/web/javascript/reference/operators/super/index.html @@ -0,0 +1,179 @@ +--- +title: super +slug: Web/JavaScript/Reference/Operators/super +translation_of: Web/JavaScript/Reference/Operators/super +--- +
{{jsSidebar("Operators")}}
+ +

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] 去刪除父層的類別屬性, 不然他會丟出一個錯誤 {{jsxref("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 不能複寫在不能複寫的屬性

+ +

當定義不可寫屬性，例如 {{jsxref("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 呼叫了第一個對象的方法. 這個動作幫助 {{jsxref("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"
+
+ +

規格

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}{{Spec2('ESDraft')}}
{{SpecName('ES2015', '#sec-super-keyword', 'super')}}{{Spec2('ES2015')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("javascript.operators.super")}}

+ +

參考

+ + -- cgit v1.2.3-54-g00ecf