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

構文

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

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

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

例

簡単なクラス式

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

js
const Foo = class {
  constructor() {}
  bar() {
    return "Hello World!";
  }
};

const instance = new Foo();
instance.bar(); // "Hello World!"
Foo.name; // "Foo"

名前付きクラス式

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

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