Klassen sind Vorlagen zur Erstellung von Objekten. Sie kapseln Daten mit Code, der auf diesen Daten arbeitet. Klassen in JS basieren aufPrototypen, haben aber auch eine eigene Syntax und Semantik, die einzigartig für Klassen sind.

Für weitere Beispiele und Erklärungen sehen Sie sich denVerwendung von Klassen Leitfaden an.

Beschreibung

Definition von Klassen

Klassen sind tatsächlich "spezielleFunktionen" und genauso wie SieFunktionsausdrücke undFunktionsdeklarationen definieren können, kann eine Klasse auf zwei Arten definiert werden: alsKlassenausdruck oderKlassendeklaration.

// Declarationclass Rectangle {  constructor(height, width) {    this.height = height;    this.width = width;  }}// Expression; the class is anonymous but assigned to a variableconst Rectangle = class {  constructor(height, width) {    this.height = height;    this.width = width;  }};// Expression; the class has its own nameconst Rectangle = class Rectangle2 {  constructor(height, width) {    this.height = height;    this.width = width;  }};

Wie Funktionsausdrücke können Klassenausdrücke anonym sein oder einen anderen Namen als die Variable haben, der sie zugewiesen sind. Im Gegensatz zu Funktionsdeklarationen haben Klassendeklarationen jedoch die gleichenzeitlichen Sperrbereich Einschränkungen wielet oderconst und verhalten sich, als ob sienicht gehoben werden.

Klassenrumpf

Der Rumpf einer Klasse ist der Teil, der in geschweiften Klammern{} steht. Hier definieren Sie Klassenmitglieder wie Methoden oder Konstruktoren.

Der Rumpf einer Klasse wird imstrict mode ausgeführt, auch ohne die"use strict" Direktive.

Ein Klassenelement kann durch drei Aspekte charakterisiert werden:

• Art: Getter, Setter, Methode oder Feld
• Standort: Statisch oder Instanz
• Sichtbarkeit: Öffentlich oder privat

Zusammen ergeben sich 16 mögliche Kombinationen. Um die Referenz logischer zu unterteilen und überlappende Inhalte zu vermeiden, werden die verschiedenen Elemente detailliert auf unterschiedlichen Seiten vorgestellt:

Methodendefinitionen

Öffentliches Instanzmethode

getter

Öffentlicher Instanz-Getter

setter

Öffentlicher Instanz-Setter

Öffentliche Klassenfelder

Öffentliches Instanzfeld

static

Öffentliche statische Methode, Getter, Setter und Feld

Private Elemente

Alles, was privat ist

Zusätzlich gibt es zwei besondere Syntaxen für Klassenelemente:constructor undstatische Initialisierungsblöcke, mit ihren eigenen Referenzen.

Konstruktor

Dieconstructor Methode ist eine spezielle Methode zur Erstellung und Initialisierung eines mit einer Klasse erstellten Objekts. Es kann in einer Klasse nur eine spezielle Methode mit dem Namen "constructor" geben — einSyntaxError wird ausgelöst, wenn die Klasse mehr als ein Vorkommen einerconstructor Methode enthält.

Ein Konstruktor kann dassuper Schlüsselwort verwenden, um den Konstruktor der Superklasse aufzurufen.

Sie können Instanzeigenschaften im Konstruktor erstellen:

class Rectangle {  constructor(height, width) {    this.height = height;    this.width = width;  }}

Alternativ, wenn die Werte Ihrer Instanzeigenschaften nicht von den Argumenten des Konstruktors abhängen, können Sie diese alsKlassenfelder definieren.

Statische Initialisierungsblöcke

Statische Initialisierungsblöcke ermöglichen eine flexible Initialisierung vonstatischen Eigenschaften, einschließlich der Auswertung von Anweisungen während der Initialisierung, während der Zugriff auf den privaten Bereich gewährt wird.

Mehrere statische Blöcke können deklariert werden, und diese können mit der Deklaration von statischen Feldern und Methoden durchmischt werden (alle statischen Elemente werden in Deklarationsreihenfolge ausgewertet).

Methoden

Methoden werden auf dem Prototyp jeder Klasseninstanz definiert und von allen Instanzen geteilt. Methoden können einfache Funktionen, asynchrone Funktionen, Generatorfunktionen oder asynchrone Generatorfunktionen sein. Für weitere Informationen, sehen Sie sich dieMethodendefinitionen an.

class Rectangle {  constructor(height, width) {    this.height = height;    this.width = width;  }  // Getter  get area() {    return this.calcArea();  }  // Method  calcArea() {    return this.height * this.width;  }  *getSides() {    yield this.height;    yield this.width;    yield this.height;    yield this.width;  }}const square = new Rectangle(10, 10);console.log(square.area); // 100console.log([...square.getSides()]); // [10, 10, 10, 10]

Statische Methoden und Felder

Dasstatic Schlüsselwort definiert eine statische Methode oder ein statisches Feld für eine Klasse. Statische Eigenschaften (Felder und Methoden) werden an der Klasse selbst statt an jeder Instanz definiert. Statische Methoden werden häufig verwendet, um Dienstfunktionen für eine Anwendung zu erstellen, während statische Felder nützlich sind für Caches, feste Konfigurationen oder alle anderen Daten, die nicht über Instanzen repliziert werden müssen.

class Point {  constructor(x, y) {    this.x = x;    this.y = y;  }  static displayName = "Point";  static distance(a, b) {    const dx = a.x - b.x;    const dy = a.y - b.y;    return Math.hypot(dx, dy);  }}const p1 = new Point(5, 5);const p2 = new Point(10, 10);p1.displayName; // undefinedp1.distance; // undefinedp2.displayName; // undefinedp2.distance; // undefinedconsole.log(Point.displayName); // "Point"console.log(Point.distance(p1, p2)); // 7.0710678118654755

Felderdeklarationen

Mit der Syntax zur Deklaration von Klassenfeldern kann dasKonstruktor Beispiel wie folgt geschrieben werden:

class Rectangle {  height = 0;  width;  constructor(height, width) {    this.height = height;    this.width = width;  }}

Klassenfelder ähneln Objekteigenschaften, nicht Variablen, daher verwenden wir keine Schlüsselwörter wieconst, um sie zu deklarieren. In JavaScript verwendenprivate Elemente eine spezielle Bezeichnersyntax, daher sollten Modifikatoren wiepublic undprivate ebenfalls nicht verwendet werden.

Wie oben zu sehen ist, können die Felder mit oder ohne einen Standardwert deklariert werden. Felder ohne Standardwerte haben standardmäßig den Wertundefined. Indem Felder im Voraus deklariert werden, werden die Klassendefinitionen besser dokumentiert und die Felder sind immer vorhanden, was bei Optimierungen hilft.

Weitere Informationen finden Sie in denöffentlichen Klassenfeldern.

Private Elemente

Mithilfe von privaten Feldern kann die Definition wie folgt verfeinert werden.

class Rectangle {  #height = 0;  #width;  constructor(height, width) {    this.#height = height;    this.#width = width;  }}

Es ist ein Fehler, von außerhalb der Klasse auf private Felder zuzugreifen; sie können nur innerhalb des Klassenkörpers gelesen oder geschrieben werden. Indem Sie Dinge definieren, die außerhalb der Klasse nicht sichtbar sind, stellen Sie sicher, dass die Benutzer Ihrer Klassen nicht von Interna abhängen, die sich von Version zu Version ändern können.

Private Felder können nur im Voraus in einer Felddeklaration deklariert werden. Sie können nicht später durch Zuweisungen erstellt werden, so wie es bei normalen Eigenschaften möglich ist.

Private Methoden und Zugriffsrechte können auch mithilfe derselben Syntax wie ihre öffentlichen Gegenstücke definiert werden, jedoch beginnend mit dem Bezeichner#.

Für weitere Informationen sieheprivate Elemente.

Vererbung

Dasextends Schlüsselwort wird inKlassendeklarationen oderKlassenausdrücken verwendet, um eine Klasse als Kind eines anderen Konstruktors (entweder einer Klasse oder einer Funktion) zu erstellen.

class Animal {  constructor(name) {    this.name = name;  }  speak() {    console.log(`${this.name} makes a noise.`);  }}class Dog extends Animal {  constructor(name) {    super(name); // call the super class constructor and pass in the name parameter  }  speak() {    console.log(`${this.name} barks.`);  }}const d = new Dog("Mitzie");d.speak(); // Mitzie barks.

Wenn im Unterklasse ein Konstruktor vorhanden ist, musssuper() zuerst aufgerufen werden, bevorthis verwendet wird. Dassuper Schlüsselwort kann auch verwendet werden, um entsprechende Methoden der Superklasse aufzurufen.

class Cat {  constructor(name) {    this.name = name;  }  speak() {    console.log(`${this.name} makes a noise.`);  }}class Lion extends Cat {  speak() {    super.speak();    console.log(`${this.name} roars.`);  }}const l = new Lion("Fuzzy");l.speak();// Fuzzy makes a noise.// Fuzzy roars.

Auswertungsreihenfolge

Wenn eineclass Deklaration oder einclass Ausdruck ausgewertet wird, werden ihre verschiedenen Komponenten in folgender Reihenfolge ausgewertet:

1. Dieextends Klausel, falls vorhanden, wird zuerst ausgewertet. Sie muss zu einer gültigen Konstruktorfunktion odernull ausgewertet werden, ansonsten wird einTypeError ausgelöst.
2. Dieconstructor Methode wird extrahiert und durch eine Standardimplementierung ersetzt, fallsconstructor nicht vorhanden ist. Da dieconstructor Definition jedoch nur eine Methodendefinition ist, ist dieser Schritt nicht beobachtbar.
3. Die Eigenschaftsschlüssel der Klassenelemente werden in Deklarationsreihenfolge ausgewertet. Wenn der Eigenschaftsschlüssel berechnet wird, wird der Berechnungsausdruck ausgewertet, wobei derthis Wert auf denthis Wert umgebender Klasse gesetzt wird (nicht die Klasse selbst). Keiner der Eigenschaftswerte wird zu diesem Zeitpunkt ausgewertet.
4. Methoden und Zugriffsrechte werden in Deklarationsreihenfolge installiert. Instanzmethoden und Zugriffsrechte werden auf derprototype Eigenschaft der aktuellen Klasse installiert, und statische Methoden und Zugriffsrechte werden auf der Klasse selbst installiert. Private Instanzmethoden und Zugriffsrechte werden gespeichert, um später direkt auf der Instanz installiert zu werden. Dieser Schritt ist nicht beobachtbar.
5. Die Klasse wird nun mit dem Prototyp gemäßextends und der Implementierung gemäßconstructor initialisiert. Für alle obigen Schritte gilt, wenn ein ausgewertet Ausdruck versucht, auf den Namen der Klasse zuzugreifen, wird einReferenceError ausgelöst, da die Klasse noch nicht initialisiert ist.
6. Die Werte der Klassenelemente werden in Deklarationsreihenfolge ausgewertet:
   • Für jedesInstanzfeld (öffentlich oder privat) wird der Initialisierungsausdruck gespeichert. Der Initialisierer wird während der Instanzerstellung ausgewertet, zu Beginn des Konstruktors (für Basisklassen) oder unmittelbar bevor dersuper() Aufruf zurückkehrt (für abgeleitete Klassen).
   • Für jedesstatische Feld (öffentlich oder privat) wird der Initialisierer mitthis auf die Klasse selbst gesetzt ausgewertet, und die Eigenschaft wird auf der Klasse erstellt.
   • Statische Initialisierungsblöcke werden mitthis auf die Klasse selbst gesetzt ausgewertet.
7. Die Klasse ist nun vollständig initialisiert und kann als Konstruktorfunktion verwendet werden.

Für Informationen darüber, wie Instanzen erstellt werden, siehe dieconstructor Referenz.

Beispiele

Binden von this mit Instanz- und statischen Methoden

Wenn eine statische oder Instanzmethode ohne einen Wert fürthis aufgerufen wird, etwa indem die Methode einer Variablen zugewiesen und dann aufgerufen wird, wird derthis Wert innerhalb der Methodeundefined sein. Dieses Verhalten bleibt das gleiche, selbst wenn die"use strict" Direktive nicht vorhanden ist, da der Code imclass Körper immer im strikten Modus ausgeführt wird.

class Animal {  speak() {    return this;  }  static eat() {    return this;  }}const obj = new Animal();obj.speak(); // the Animal objectconst speak = obj.speak;speak(); // undefinedAnimal.eat(); // class Animalconst eat = Animal.eat;eat(); // undefined

Wenn wir das oben genannte mit traditioneller funktionsbasierter Syntax im nicht-strikten Modus umschreiben, dann werdenthis Methodenaufrufe automatisch anglobalThis gebunden. Im strikten Modus bleibt der Wert vonthis alsundefined.

function Animal() {}Animal.prototype.speak = function () {  return this;};Animal.eat = function () {  return this;};const obj = new Animal();const speak = obj.speak;speak(); // global object (in non–strict mode)const eat = Animal.eat;eat(); // global object (in non-strict mode)

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwendung von Klassen Leitfaden
• class
• class Ausdruck
• Funktionen
• ES6 In Depth: Classes auf hacks.mozilla.org (2015)