クラス宣言は、プロトタイプベースの継承を使って、指定された名前の新しいクラスを作成します。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
クラス式を使ってクラスを定義することもできます。しかし、クラス式と異なり、クラス宣言は既存のクラスを再宣言することができず、再宣言しようとすると SyntaxError が発生します。
構文
class name [extends otherName] {
// クラス本体
}
解説
クラス式と同様、クラス宣言の内部は厳格モードで実行されます。 constructor メソッドは省略可能です。
クラス宣言は巻き上げが行われません (関数宣言とは異なります)。
例
単純なクラス宣言
次の例では、はじめに 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';
}
}
クラスを二度宣言する
クラス宣言を使って再度クラスを宣言すると、 SyntaxError が発生します。
class Foo {};
class Foo {}; // Uncaught SyntaxError: Identifier 'Foo' has already been declared
クラス式を使って事前にクラスを定義していたときも、同じエラーが発生します。
let Foo = class {};
class Foo {}; // Uncaught SyntaxError: Identifier 'Foo' has already been declared
仕様書
| 仕様書 |
|---|
| ECMAScript (ECMA-262) Class definitions の定義 |
ブラウザーの互換性
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | サーバー | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
class | Chrome
完全対応
49
| Edge 完全対応 13 | Firefox 完全対応 45 | IE 未対応 なし | Opera 完全対応 36 | Safari 完全対応 10.1 | WebView Android
完全対応
49
| Chrome Android
完全対応
49
| Firefox Android 完全対応 45 | Opera Android
完全対応
36
| Safari iOS 完全対応 10.3 | Samsung Internet Android
完全対応
4.0
| nodejs 完全対応 6.0.0 |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実装ノートを参照してください。
- 実装ノートを参照してください。