MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

class 宣言は、プロトタイプベースの継承を使って、名前付きで新しいクラスを作成します。

class 式を使ってクラスを定義することもできます。しかし、class 式と異なり、class 宣言は既存のクラスを再宣言できず、再宣言しようとすると型エラーになります。

構文

class name [extends] {
  // class body
}

説明

class 式と同様、class 宣言の内部は strict モード で実行されます。コンストラクタプロパティはオプションです。

class 宣言は、(function 宣言と違って) hoisted されません。

単純な class 宣言

次の例では、はじめに Polygon という名前のクラスを定義し、次にそれを拡張して Square という名前のクラスを作成します。コンストラクタで使われている super() は、コンストラクタ内でのみ使えること、this キーワードの使用前に呼び出さなくてはならないことに注意してください。

class Polygon {
  constructor(height, width) {
    this.name = 'Polygon';
    this.height = height;
    this.width = width;
  }
}

class Square extends Polygon {
  constructor(length) {
    super(length, length);
    this.name = 'Square';
  }
}

2 度クラス宣言を行う

class 宣言を使って再度クラスを宣言すると、型エラーをスローします。

class Foo {};
class Foo {}; // Uncaught TypeError: Identifier 'Foo' has already been declared

class 式を使って事前にクラスを定義していたときも、同じエラーをスローします。

var Foo = class {};
class Foo {}; // Uncaught TypeError: Identifier 'Foo' has already been declared

仕様

仕様 状況 コメント
ECMAScript 2015 (6th Edition, ECMA-262)
Class definitions の定義
標準 初期定義。
ECMAScript 2017 Draft (ECMA-262)
Class definitions の定義
ドラフト  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 42.0 45 (45) ? ? ?
配列サブクラス 43.0 未サポート ? ? ?
非 strict モードでの使用 49.0        
機能 Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
基本サポート 未サポート 42.0 45.0 (45) ? ? ? 42.0
配列サブクラス 未サポート 43.0 未サポート ? ? ? 43.0
非 strict モードでの使用 未サポート 49.0         49.0

関連項目

ドキュメントのタグと貢献者

 このページの貢献者: ambi, YuichiNukiyama, Marsf
 最終更新者: ambi,