class 式

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2016年3月⁩.

class キーワードを使用すると、式内でクラスを定義することができます。

クラスは、class 宣言を使用して定義することもできます。

試してみましょう

const Rectangle = class {  constructor(height, width) {    this.height = height;    this.width = width;  }  area() {    return this.height * this.width;  }};console.log(new Rectangle(5, 8).area());// 予想される結果: 40

構文

class {  // クラス本体}class name {  // クラス本体}

メモ:式文は、class 宣言との曖昧さを避けるため、キーワードclass で始めてはなりません。class キーワードは、文を受け入れないコンテキストで現れた場合にのみ、式を開始します。

class 式は、class 宣言とよく似ており、構文もほぼ同じです。class 宣言と同様に、class 式の本体は厳格モードで実行されます。class 式とclass 宣言の主な違いは、クラス名です。class 式ではこのクラス名を省略できるため、無名クラスを作成することができます。クラス式はクラスを再定義できますが、class 宣言を使用してクラスを再宣言すると、SyntaxError が発生します。詳細については、クラスの章を参照してください。

例

簡単なクラス式

以下は、名前のない簡単なクラス式です。変数Foo を使って参照できます。

const Foo = class {  constructor() {}  bar() {    return "Hello World!";  }};const instance = new Foo();instance.bar(); // "Hello World!"Foo.name; // "Foo"

名前付きクラス式

クラス内部で現在のクラスを参照したい場合は、名前付きクラス式を作成してください。この名前は、そのクラス式自身のスコープ内だけで見ることができます。

const Foo = class NamedFoo {  constructor() {}  whoIsThere() {    return NamedFoo.name;  }};const bar = new Foo();bar.whoIsThere(); // "NamedFoo"NamedFoo.name; // ReferenceError: NamedFoo is not definedFoo.name; // "NamedFoo"