From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../reference/operators/super/index.html | 176 +++++++++++++++++++++ 1 file changed, 176 insertions(+) create mode 100644 files/ja/web/javascript/reference/operators/super/index.html (limited to 'files/ja/web/javascript/reference/operators/super/index.html') diff --git a/files/ja/web/javascript/reference/operators/super/index.html b/files/ja/web/javascript/reference/operators/super/index.html new file mode 100644 index 0000000000..f4787e8d5f --- /dev/null +++ b/files/ja/web/javascript/reference/operators/super/index.html @@ -0,0 +1,176 @@ +--- +title: super +slug: Web/JavaScript/Reference/Operators/super +tags: + - Classes + - ECMAScript 2015 + - JavaScript + - Language feature + - Left-hand-side expressions + - Operator +translation_of: Web/JavaScript/Reference/Operators/super +--- +
{{jsSidebar("Operators")}}
+ +

super キーワードは、オブジェクトの親の関数を呼び出すために使用できます。

+ +

super.prop および super[expr] 式は、class と オブジェクトリテラル の両方におけるあらゆるメソッド定義で有効です。

+ +

構文

+ +
super([arguments]); // 親コンストラクターを呼び出します。
+super.functionOnParent([arguments]);
+
+ +

解説

+ +

コンストラクターで使用する場合、super キーワードを単独で置き、this キーワードが使われる前に使用する必要があります。super キーワードは、親オブジェクトの関数を呼び出すためにも使用できます。

+ +

例

+ +

クラス内での super の使用

+ +

このコードスニペットは、classes sample (実際のデモ) からとっています。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.height = this.width = Math.sqrt(value);
+  }
+}
+
+class Square extends Rectangle {
+  constructor(length) {
+    this.height; // ReferenceError になります。super を先に呼び出さなければなりません！
+
+    // length の値で親クラスの constructor を呼びます。
+    // Rectangle の width と height になります。
+    super(length, length);
+
+    // Note: 'this' を使う前に super() をコールしなければなりません。
+    // でないと reference error になります。
+    this.name = 'Square';
+  }
+}
+ +

静的メソッドでの super の呼び出し

+ +

static メソッドでも super を呼び出すことができます。

+ +
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 演算子 や 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;   // 値を上書きできない
+  }
+}
+
+var y = new Y();
+y.foo(); // TypeError: "prop" は読み取り専用
+console.log(y.prop); // 1
+
+ +

オブジェクトリテラル内での super.prop の使用

+ +

super は object initializer / literal 記法内でも使用できます。この例では、二つのオブジェクトがメソッドを定義しています。二つ目のオブジェクトの中で、super が最初のオブジェクトのメソッドを呼び出しています。これは {{jsxref("Object.setPrototypeOf()")}} の助けで動作し、これは obj2 のプロトタイプを 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"
+
+ +

仕様

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}
+ +

ブラウザー実装状況

+ + + +

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

+ +

関連情報

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