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
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 geltenclass
-Deklarationen allgemein als nicht gehoben (im Gegensatz zu Funktionsdeklarationen).class
-Deklarationen erstellen keine Eigenschaften aufglobalThis
, 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.
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.
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
Report problems with this compatibility data on GitHubdesktop | mobile | server | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
class |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Has more compatibility info.