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 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 Klassenkörper einer class Deklaration wird im strict mode ausgeführt. Die class-Deklaration ist sehr ähnlich zu let:

  • class Deklarationen sind sowohl auf Blöcke als auch auf Funktionen beschränkt.
  • class Deklarationen können erst nach der Stelle des Deklarationsortes aufgerufen werden (siehe temporal dead zone). Aus diesem Grund werden class-Deklarationen allgemein als nicht-gehoistet angesehen (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 neu-deklariert werden.

Außerhalb des Klassenkörpers können class Deklarationen wie let neu zugewiesen werden, sollten jedoch vermieden werden. Innerhalb des Klassenkörpers ist die Bindung konstant wie bei 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 einfache Klassendeklaration

Im folgenden Beispiel definieren wir zuerst eine Klasse namens Rectangle, die dann erweitert wird, um eine Klasse namens FilledRectangle zu erstellen.

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

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