extends

extends は、該当classが子クラスであることを示すために使用します。

構文

class ChildClass extends ParentClass { ... }

説明

extends キーワードは、カスタムクラスやビルトインオブジェクトをサブクラス化するために使用できます。

.prototype 拡張は、Objectnull の必要があります。

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;
  } 
}

ビルトインオブジェクトでの extends の使用

この例は、組み込みの 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();
  }
}

null の拡張

プロトタイプオブジェクトが Object.prototype を継承しない点を除いて、null の継承は通常のクラスのように動作します。

class nullExtends extends null {
  constructor() {}
}

Object.getPrototypeOf(nullExtends); // Function.prototype
Object.getPrototypeOf(nullExtends.prototype) // null

new nullExtends(); //ReferenceError: this is not defined

仕様

仕様 状況 コメント
ECMAScript 2015 (6th Edition, ECMA-262)
extends の定義
標準 初期定義
ECMAScript (ECMA-262)
extends の定義
現行の標準  

ブラウザ実装状況

Update compatibility data on GitHub
デスクトップモバイルサーバー
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung InternetNode.js
extendsChrome 完全対応 49
補足
完全対応 49
補足
補足 From Chrome 42 to 48 strict mode is required. Non-strict mode support can be enabled using the flag "Enable Experimental JavaScript".
Edge 完全対応 13Firefox 完全対応 45IE 未対応 なしOpera 完全対応 36
補足
完全対応 36
補足
補足 From Chrome 29 to 35 strict mode is required. Non-strict mode support can be enabled using the flag "Enable Experimental JavaScript".
Safari 完全対応 9WebView Android 完全対応 49
補足
完全対応 49
補足
補足 From Chrome 42 to 48 strict mode is required. Non-strict mode support can be enabled using the flag "Enable Experimental JavaScript".
Chrome Android 完全対応 49
補足
完全対応 49
補足
補足 From Chrome 42 to 48 strict mode is required. Non-strict mode support can be enabled using the flag "Enable Experimental JavaScript".
Firefox Android 完全対応 45Opera Android 完全対応 36
補足
完全対応 36
補足
補足 From Chrome 29 to 35 strict mode is required. Non-strict mode support can be enabled using the flag "Enable Experimental JavaScript".
Safari iOS 完全対応 9Samsung Internet Android 完全対応 5.0nodejs 完全対応 6.0.0
完全対応 6.0.0
完全対応 4.0.0
無効
無効 From version 4.0.0: this feature is behind the --use_strict runtime flag.
完全対応 5.0.0
無効
無効 From version 5.0.0: this feature is behind the --harmony runtime flag.

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連項目