Klassen

Beschreibung

Definieren von Klassen

Klassen sind tatschlich "besondere Funktionen", und genauso wie Sie Funktionsausdrcke und Funktionsdeklarationen definieren knnen, kann eine Klasse auf zwei Arten definiert werden: ein Klassen-Ausdruck oder eine Klassen-Deklaration.

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

// Expression; the class is anonymous but assigned to a variable
const Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

// Expression; the class has its own name
const Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

Wie Funktionsausdrcke knnen Klassen-Ausdrcke anonym sein oder einen Namen haben, der von der Variablen, der sie zugewiesen sind, abweicht. Anders als Funktionsdeklarationen haben Klassendeklarationen jedoch die gleichen Einschrnkungen der temporal dead zone wie let oder const und verhalten sich, als ob sie nicht gehoben wrden.

Klassenkrper

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

Der Krper einer Klasse wird im strict mode ausgefhrt, auch ohne die "use strict"-Direktive.

Ein Klassenelement kann durch drei Aspekte charakterisiert werden:

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

Zusammen ergeben sie 16 mgliche Kombinationen. Um die Referenz logischer zu unterteilen und berlappenden Inhalt zu vermeiden, werden die verschiedenen Elemente detailliert auf verschiedenen Seiten vorgestellt:

Methodendefinitionen

ffentliche Instanzmethode

getter

ffentlicher Instanzgetter

setter

ffentlicher Instanzsetter

ffentliche Klassenfelder

ffentliches Instanzfeld

static

ffentliche statische Methode, Getter, Setter und Feld

Private Elemente

Alles, was privat ist

Zustzlich gibt es zwei spezielle Klassenelement-Syntaxen: constructor und statische Initialisierungsblcke, mit ihren eigenen Referenzen.

Konstruktor

Die constructor-Methode ist eine spezielle Methode zum Erstellen und Initialisieren eines mit einer Klasse erstellten Objekts. Es kann nur eine spezielle Methode mit dem Namen "constructor" in einer Klasse geben es wird ein SyntaxError geworfen, wenn die Klasse mehr als eine constructor-Methode enthlt.

Ein Konstruktor kann das super-Schlsselwort verwenden, um den Konstruktor der Superklasse aufzurufen.

Sie knnen Instanzeigenschaften innerhalb des Konstruktors erstellen:

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

Alternativ, wenn die Werte Ihrer Instanzeigenschaften nicht von den Argumenten des Konstruktors abhngen, knnen Sie sie als Klassenfelder definieren.

Statische Initialisierungsblcke

Statische Initialisierungsblcke ermglichen eine flexible Initialisierung von statischen Eigenschaften, einschlielich der Auswertung von Anweisungen whrend der Initialisierung, whrend der Zugriff auf den privaten Bereich gewhrt wird.

Mehrere statische Blcke knnen deklariert werden und diese knnen mit der Deklaration von statischen Feldern und Methoden verknpft werden (alle statischen Elemente werden in der Deklarationsreihenfolge ausgewertet).

Methoden

Methoden werden auf dem Prototyp jeder Klasseninstanz definiert und allen Instanzen gemeinsam genutzt. Methoden knnen einfache Funktionen, asynchrone Funktionen, Generatorfunktionen oder asynchrone Generatorfunktionen sein. Fr weitere Informationen siehe Methodendefinitionen.

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); // 100
console.log([...square.getSides()]); // [10, 10, 10, 10]

Statische Methoden und Felder

Das static-Schlsselwort definiert eine statische Methode oder ein Feld fr eine Klasse. Statische Eigenschaften (Felder und Methoden) sind an der Klasse selbst statt an jeder Instanz definiert. Statische Methoden werden hufig verwendet, um Utility-Funktionen fr eine Anwendung zu erstellen, whrend statische Felder ntzlich fr Caches, feste Konfigurationen oder andere Daten sind, die nicht ber Instanzen hinweg dupliziert werden mssen.

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; // undefined
p1.distance; // undefined
p2.displayName; // undefined
p2.distance; // undefined

console.log(Point.displayName); // "Point"
console.log(Point.distance(p1, p2)); // 7.0710678118654755

Felderklrung

Mit der Klassenfelddeklarationssyntax kann das Konstruktor-Beispiel wie folgt geschrieben werden:

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

Klassenfelder hneln Objekt-Eigenschaften, nicht Variablen, daher verwenden wir keine Schlsselwrter wie const, um sie zu deklarieren. In JavaScript verwenden private Elemente eine spezielle Bezeichnersyntax, daher sollten Modifikatorschlsselwrter wie public und private ebenfalls nicht verwendet werden.

Wie oben gezeigt, knnen die Felder mit oder ohne Standardwert deklariert werden. Felder ohne Standardwerte haben standardmig undefined. Durch die frhzeitige Deklaration der Felder werden Klassendefinitionen selbstdokumentierender, und die Felder sind immer vorhanden, was Optimierungen erleichtert.

Siehe ffentliche Klassenfelder fr weitere Informationen.

Private Elemente

Mit 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 auerhalb der Klasse auf private Felder zu verweisen; sie knnen nur innerhalb des Klassenkrpers gelesen oder geschrieben werden. Indem Sie Dinge definieren, die auerhalb der Klasse nicht sichtbar sind, stellen Sie sicher, dass die Benutzer Ihrer Klassen nicht von internen Details abhngen knnen, die sich von Version zu Version ndern knnen.

Private Felder knnen nur im Voraus in einer Felderklrung deklariert werden. Sie knnen nicht spter durch Zuweisung zu ihnen erstellt werden, wie es bei normalen Eigenschaften der Fall ist.

Private Methoden und Zugriffsmethoden knnen ebenfalls unter Verwendung derselben Syntax wie ihre ffentlichen Gegenstcke definiert werden, jedoch beginnt der Bezeichner mit #.

Fr weitere Informationen siehe private Elemente.

Vererbung

Das extends-Schlsselwort wird in Klassendeklarationen oder Klassenausdrcken verwendet, um eine Klasse als Kind eines anderen Konstruktors (entweder eine Klasse oder eine 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, muss er zuerst super() aufrufen, bevor er this verwendet. Das super-Schlsselwort 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.

Ausfhrungsreihenfolge

Wenn eine class Deklaration oder ein class Ausdruck ausgewertet wird, werden seine verschiedenen Komponenten in der folgenden Reihenfolge ausgewertet:

1. Die extends-Klausel, falls vorhanden, wird zuerst ausgewertet. Sie muss zu einer gltigen Konstruktorfunktion oder null ausgewertet werden, andernfalls wird ein TypeError geworfen.
2. Die constructor-Methode wird extrahiert, mit einer Standardimplementierung ersetzt, wenn constructor nicht vorhanden ist. Da die constructor-Definition jedoch nur eine Methodendefinition ist, ist dieser Schritt nicht beobachtbar.
3. Die Eigenschaftsschlssel der Klassenelemente werden in der Reihenfolge der Deklaration ausgewertet. Wenn der Eigenschaftsschlssel berechnet wird, wird der berechnete Ausdruck ausgewertet, wobei der Wert this auf den umgebenden Wert this der Klasse gesetzt wird (nicht die Klasse selbst). Keine der Eigenschaftswerte wird bisher ausgewertet.
4. Methoden und Zugriffsmethoden werden in der Reihenfolge der Deklaration installiert. Instanzmethoden und Zugriffsmethoden werden auf der prototype Eigenschaft der aktuellen Klasse installiert, und statische Methoden und Zugriffsmethoden werden auf der Klasse selbst installiert. Private Instanzmethoden und Zugriffsmethoden werden gespeichert, um spter direkt auf der Instanz installiert zu werden. Dieser Schritt ist nicht beobachtbar.
5. Die Klasse ist nun mit dem durch extends angegebenen Prototyp und der durch constructor angegebenen Implementierung initialisiert. Bei allen obigen Schritten, wenn ein ausgewerteter Ausdruck versucht, auf den Namen der Klasse zuzugreifen, wird ein ReferenceError geworfen, da die Klasse noch nicht initialisiert ist.
6. Die Werte der Klassenelemente werden in der Reihenfolge der Deklaration ausgewertet:
   • Fr jedes Instanzfeld (ffentlich oder privat), wird sein Initialisierer-Ausdruck gespeichert. Der Initialisierer wird whrend der Instanzerstellung ausgewertet, am Anfang des Konstruktors (fr Basisklassen) oder unmittelbar bevor der super()-Aufruf zurckkehrt (fr abgeleitete Klassen).
   • Fr jedes statische Feld (ffentlich oder privat), wird sein Initialisierer mit this auf die Klasse selbst gesetzt ausgewertet und die Eigenschaft wird auf der Klasse erstellt.
   • Statische Initialisierungsblcke werden mit this auf die Klasse selbst gesetzt ausgewertet.
7. Die Klasse ist nun vollstndig initialisiert und kann als Konstruktionsfunktion verwendet werden.

Fr die Erstellung von Instanzen siehe die constructor-Referenz.

Beispiele

Binden von this mit Instanz- und statischen Methoden

Wenn eine statische oder Instanzmethode ohne Wert fr this aufgerufen wird, z. B. durch Zuweisung der Methode zu einer Variablen und anschlieendem Aufruf, ist der this-Wert innerhalb der Methode undefined. Dieses Verhalten ist dasselbe, auch wenn die "use strict"-Direktive nicht vorhanden ist, da der Code innerhalb des class-Krpers immer im strict mode ausgefhrt wird.

class Animal {
  speak() {
    return this;
  }
  static eat() {
    return this;
  }
}

const obj = new Animal();
obj.speak(); // the Animal object
const speak = obj.speak;
speak(); // undefined

Animal.eat(); // class Animal
const eat = Animal.eat;
eat(); // undefined

Wenn wir das oben Genannte unter Verwendung traditioneller funktionsbasierter Syntax im nicht-strict mode umschreiben, werden this-Methodenaufrufe automatisch an globalThis gebunden. Im strict mode bleibt der Wert von this als undefined.

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 nonstrict mode)

const eat = Animal.eat;
eat(); // global object (in non-strict mode)

Spezifikationen

Browser-Kompatibilitt

Siehe auch

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