これは Harmony(ECMAScript 6) 提案の一部であり、実験段階の技術です。
この技術の仕様は安定していません。ブラウザ互換性の一覧表を確認してください。またこれらの構文や動作は、仕様変更などにより、新しいバージョンのブラウザでは変更される可能性があるという点に注意してください。
extendsキーワードは、class 宣言 や class 式内で、他のクラスの子としてクラスを作成するために使用します。
構文
class ChildClass extends ParentClass { ... }
説明
extends キーワードは、サブクラスのカスタムクラスおよび組み込みオブジェクトに使用できます。
例
最初の例は、Polygon と呼ばれるクラスから Square と呼ばれるクラスを作成します。
class Square extends Polygon {
constructor(length) {
// ここでは、親クラスのコンストラクタを呼び出し、
// Polygon の幅と高さの length を与えます。
super(length, length);
// Note: 引き出されたクラスでは、'this' を使う前に
// super() を呼び出さなくてはなりません。 こうしなければ、参照エラーになります。
this.name = 'Square';
}
get area() {
return this.height * this.width;
}
set area(value) {
this.area = value;
}
}
この例は、組み込みの Date オブジェクトを拡張します。
class myDate extends Date {
constructor() {|
super();
}
getFormattedDate() {
var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
return this.getDate() + "-" + months[this.getMonth()] + "-" + this.getFullYear();
}
}
デモ
仕様
| 仕様 | 状況 | コメント |
|---|---|---|
| ECMAScript 6 (ECMA-262) The definition of 'extends' in that specification. |
勧告候補 | Initial definition. |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | 42.0 | Available in the Nightly channel only (since March 2015) | ? | ? | ? |
| Array subclassing | 43.0 | 未サポート | ? | ? | ? |
| 機能 | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| 基本サポート | 42.0 | 42.0 | Available in the Nightly channel only (since March 2015) | ? | ? | ? |
| Array subclassing | 43.0 | ? | 未サポート | ? | ? | ? |