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 zu einem gegebenen Namen.

Sie können Klassen auch mit dem class-Ausdruck definieren.

Probieren Sie es aus

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 sehr ähnlich der let-Deklaration:

  • class-Deklarationen sind sowohl auf Blöcke als auch auf Funktionen beschränkt.
  • class-Deklarationen können nur nach Erreichen des Deklarationsortes zugegriffen werden (siehe temporäre Totzone). Aus diesem Grund gelten class-Deklarationen allgemein als nicht-hoistisch (im Gegensatz zu Funktionsdeklarationen).
  • class-Deklarationen erstellen keine Eigenschaften auf globalThis, wenn sie auf der obersten Ebene eines Skripts deklariert werden (im Gegensatz zu Funktionsdeklarationen).
  • class-Deklarationen können nicht durch eine andere Deklaration im selben Gültigkeitsbereich erneut deklariert werden.

Außerhalb des Klassenkörpers können class-Deklarationen wie let neu zugewiesen werden, aber dies sollte vermieden werden. 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 zunächst eine Klasse namens Rectangle und erweitern sie dann, um eine Klasse namens FilledRectangle zu erstellen.

Beachten Sie, dass super(), das im constructor 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 Language Specification
# sec-class-definitions

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch