class

Baseline Widely available

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

class 宣言は、指定された名前の新しい class を作成します。

クラス式を使ってクラスを定義できます。

試してみましょう

class Polygon {
  constructor(height, width) {
    this.area = height * width;
  }
}

console.log(new Polygon(4, 3).area);
// Expected output: 12

構文

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

解説

クラス宣言のクラス本体は厳格モードで実行されます。クラス宣言は let と非常によく似ています。

class 宣言は、関数だけでなくブロックにもスコープされます。
class 宣言は、宣言された場所に到達した後にのみアクセスできます（一時的デッドゾーンを参照）。このため、class 宣言は一般的に非ホイスティングとみなされます（関数宣言とは異なります）。
スクリプトの最上位レベルで宣言された class 宣言は、globalThis にプロパティを作成しません（関数宣言とは異なります）。
class 宣言は、同じスコープ内の他の宣言によって再宣言できません。

js
class Foo {
  static {
    Foo = 1; // TypeError: Assignment to constant variable.
  }
}

class Foo2 {
  bar = (Foo2 = 1); // TypeError: Assignment to constant variable.
}

class Foo3 {}
Foo3 = 1;
console.log(Foo3); // 1

例

クラス宣言

次の例では、はじめに Rectangle という名前のクラスを定義し、次にそれを拡張して FilledRectangle という名前のクラスを作成します。

なお、コンストラクター (constructor) で使われている super() は、コンストラクター内でのみ使えること、 this キーワードの使用前に呼び出さなくてはならないことに注意してください。

js
class Rectangle {
  constructor(height, width) {
    this.name = "Rectangle";
    this.height = height;
    this.width = width;
  }
}

class FilledRectangle extends Rectangle {
  constructor(height, width, color) {
    super(height, width);
    this.name = "Filled rectangle";
    this.color = color;
  }
}