-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.md
160 lines (121 loc) · 4.82 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
---
title: super
slug: Web/JavaScript/Reference/Operators/super
---
{{jsSidebar("Operators")}}
**super** キーワードは、オブジェクトの親の関数を呼び出すために使用できます。
`super.prop` および `super[expr]` 式は、[class](/ja/docs/Web/JavaScript/Reference/Classes) と[オブジェクトリテラル](/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer)の両方におけるあらゆる[メソッド定義](/ja/docs/Web/JavaScript/Reference/Functions/Method_definitions)で有効です。
{{EmbedInteractiveExample("pages/js/expressions-super.html", "taller")}}
## 構文
```js
super([arguments]); // 親コンストラクターを呼び出します。
super.functionOnParent([arguments]);
```
## 解説
コンストラクターで使用する場合��`super` キーワードを単独で置き、`this` キーワードが使われる前に使用する必要があります。`super` キーワードは、親オブジェクトの関数を呼び出すためにも使用できます。
## 例
### クラス内での `super` の使用
このコードスニペットは、[クラスの例](https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html) ([ライブデモ](https://googlechrome.github.io/samples/classes-es6/index.html)) からとっています。`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 を先に呼び出さなければなりません!
// length の値で親クラスの constructor を呼びます。
// Rectangle の width と height になります。
super(length, length);
// Note: 'this' を使う前に super() をコールしなければなりません。
// でないと reference error になります。
this.name = "Square";
}
}
```
### 静的メソッドでの super の呼び出し
[static](/ja/docs/Web/JavaScript/Reference/Classes/static) メソッドでも super を呼び出すことができます。
```js
class Rectangle {
static logNbSides() {
return "I have 4 sides";
}
}
class Square extends Rectangle {
static logDescription() {
return super.logNbSides() + " which are all equal";
}
}
Square.logDescription(); // 'I have 4 sides which are all equal'
```
### super プロパティを削除するとエラーが発生する
親クラスのプロパティを削除するために、[delete 演算子](/ja/docs/Web/JavaScript/Reference/Operators/delete) や `super.prop`、`super[expr]` を使うことはできません。{{jsxref("ReferenceError")}} がスローされます。
```js
class Base {
foo() {}
}
class Derived extends Base {
delete() {
delete super.foo; // this is bad
}
}
new Derived().delete(); // ReferenceError: invalid delete involving 'super'.
```
### `super.prop` は書き込み不可能なプロパティを上書きできない
{{jsxref("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; // 値を上書きできない
}
}
var y = new Y();
y.foo(); // TypeError: "prop" は読み取り専用
console.log(y.prop); // 1
```
### オブジェクトリテラル内での `super.prop` の使用
super は[オブジェクト初期化子 / リテラル](/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer)記法内でも使用できます。この例では、 2 つのオブジェクトがメソッドを定義しています。 2 つ目のオブジェクトの中で、`super` が最初のオブジェクトのメソッドを呼び出しています。これは {{jsxref("Object.setPrototypeOf()")}} の助けで動作し、これは `obj2` のプロトタイプを `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"
```
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- [クラス](/ja/docs/Web/JavaScript/Reference/Classes)