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 2017.

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

Sie können Klassen auch mit dem class-Ausdruck 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 Klassenrumpf einer Klassendeklaration wird im Strict Mode ausgeführt. Die class-Deklaration ist der let-Deklaration sehr ähnlich:

  • class-Deklarationen sind sowohl auf Blöcke als auch auf Funktionen beschränkt.
  • class-Deklarationen können erst nach Erreichen des Deklarationsorts zugegriffen werden (siehe temporäre tote Zone). Aus diesem Grund werden class-Deklarationen allgemein als nicht-gehoisted angesehen (im Gegensatz zu Funktionsdeklarationen).
  • class-Deklarationen erzeugen keine Eigenschaften auf globalThis, wenn sie auf oberster Ebene eines Skripts deklariert werden (im Gegensatz zu Funktionsdeklarationen).
  • class-Deklarationen können nicht durch irgendeine andere Deklaration im selben Bereich neu deklariert werden.

Außerhalb des Klassenkörpers können class-Deklarationen wie let neu zugewiesen werden, aber Sie sollten dies vermeiden. Innerhalb des Klassenkörpers ist die Bindung konstant wie const.

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 dann, um eine Klasse namens FilledRectangle zu erstellen.

Beachten Sie, dass super(), das im Konstruktor verwendet wird, nur in Konstruktoren verwendet werden kann und muss aufgerufen werden, bevor das Schlüsselwort this verwendet werden kann.

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® 2026 Language Specification
# sec-class-definitions

Browser-Kompatibilität

Siehe auch