class

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2016.

Die class-Deklaration erstellt eine Bindung einer neuen Klasse an einen gegebenen Namen.

Sie können Klassen auch mithilfe des class expression definieren.

Probieren Sie es aus

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

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

Syntax

js
class name {
  // class body
}
class name extends otherName {
  // class body
}

Beschreibung

Der Klassenkörper einer Klassendeklaration wird im Strict-Modus ausgeführt. Die class-Deklaration ist der let-Deklaration sehr ähnlich:

  • class-Deklarationen sind sowohl an Blöcke als auch an Funktionen gebunden.
  • class-Deklarationen können erst nach der Deklarationsstelle verwendet werden (siehe temporal dead zone). Aus diesem Grund gelten class-Deklarationen allgemein als nicht gehoben (im Gegensatz zu Funktionsdeklarationen).
  • class-Deklarationen erstellen keine Eigenschaften auf globalThis, wenn sie im obersten Bereich eines Skripts deklariert werden (im Gegensatz zu Funktionsdeklarationen).
  • class-Deklarationen können innerhalb desselben Bereichs nicht durch eine andere Deklaration erneut deklariert werden.

Außerhalb des Klassenkörpers können class-Deklarationen wie let neu zugewiesen werden, jedoch sollte dies vermieden werden. Innerhalb des Klassenkörpers ist die Bindung wie const konstant.

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

Beispiele

Eine Klassendeklaration

Im folgenden Beispiel definieren wir zuerst eine Klasse namens Rectangle und erweitern sie anschließend, um eine Klasse namens FilledRectangle zu erstellen.

Beachten Sie, dass super(), das im constructor verwendet wird, nur in Konstruktoren verwendet werden kann und vor der Verwendung des this-Schlüsselworts aufgerufen werden muss.

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;
  }
}

Spezifikationen

Specification
ECMAScript® 2025 Language Specification
# sec-class-definitions

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch