Klassen - JavaScript | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

Klassen

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2016 browserübergreifend verfügbar.

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

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

In diesem Artikel

Beschreibung

Definition von Klassen

Klassen sind tatsächlich "spezielle Funktionen" und genauso wie Sie Funktionsausdrücke und Funktionsdeklarationen definieren können, kann eine Klasse auf zwei Arten definiert werden: als Klassenausdruck oder Klassendeklaration.

js
// 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 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 gleichen zeitlichen Sperrbereich Einschränkungen wie let oder const und verhalten sich, als ob sie nicht 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 im strict 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

Hinweis: Private Elemente haben die Einschränkung, dass alle in derselben Klasse deklarierten privaten Namen eindeutig sein müssen. Alle anderen öffentlichen Eigenschaften haben diese Einschränkung nicht — Sie können mehrere öffentliche Eigenschaften mit demselben Namen haben, und das letzte überschreibt die anderen. Dies ist dasselbe Verhalten wie bei Objektinitialisierern.

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

Konstruktor

Die constructor 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 — ein SyntaxError wird ausgelöst, wenn die Klasse mehr als ein Vorkommen einer constructor Methode enthält.

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

Sie können Instanzeigenschaften im Konstruktor erstellen:

js
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 als Klassenfelder definieren.

Statische Initialisierungsblöcke

Statische Initialisierungsblöcke ermöglichen eine flexible Initialisierung von statischen 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 die Methodendefinitionen an.

js
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 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.

js
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

Felderdeklarationen

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

js
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 wie const, um sie zu deklarieren. In JavaScript verwenden private Elemente eine spezielle Bezeichnersyntax, daher sollten Modifikatoren wie public und private 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 Wert undefined. 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.

js
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 siehe private Elemente.

Vererbung

Das extends Schlüsselwort wird in Klassendeklarationen oder Klassenausdrücken verwendet, um eine Klasse als Kind eines anderen Konstruktors (entweder einer Klasse oder einer Funktion) zu erstellen.

js
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 super() zuerst aufgerufen werden, bevor this verwendet wird. Das super Schlüsselwort kann auch verwendet werden, um entsprechende Methoden der Superklasse aufzurufen.

js
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 eine class Deklaration oder ein class Ausdruck ausgewertet wird, werden ihre verschiedenen Komponenten in folgender Reihenfolge ausgewertet:

Die extends Klausel, falls vorhanden, wird zuerst ausgewertet. Sie muss zu einer gültigen Konstruktorfunktion oder null ausgewertet werden, ansonsten wird ein TypeError ausgelöst.
Die constructor Methode wird extrahiert und durch eine Standardimplementierung ersetzt, falls constructor nicht vorhanden ist. Da die constructor Definition jedoch nur eine Methodendefinition ist, ist dieser Schritt nicht beobachtbar.
Die Eigenschaftsschlüssel der Klassenelemente werden in Deklarationsreihenfolge ausgewertet. Wenn der Eigenschaftsschlüssel berechnet wird, wird der Berechnungsausdruck ausgewertet, wobei der this Wert auf den this Wert umgebender Klasse gesetzt wird (nicht die Klasse selbst). Keiner der Eigenschaftswerte wird zu diesem Zeitpunkt ausgewertet.
Methoden und Zugriffsrechte werden in Deklarationsreihenfolge installiert. Instanzmethoden und Zugriffsrechte werden auf der prototype 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.
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 ein ReferenceError ausgelöst, da die Klasse noch nicht initialisiert ist.
Die Werte der Klassenelemente werden in Deklarationsreihenfolge ausgewertet:
- Für jedes Instanzfeld (ö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 der super() Aufruf zurückkehrt (für abgeleitete Klassen).
- Für jedes statische Feld (öffentlich oder privat) wird der Initialisierer mit this auf die Klasse selbst gesetzt ausgewertet, und die Eigenschaft wird auf der Klasse erstellt.
- Statische Initialisierungsblöcke werden mit this auf die Klasse selbst gesetzt ausgewertet.
Die Klasse ist nun vollständig initialisiert und kann als Konstruktorfunktion verwendet werden.

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

Beispiele

Binden von this mit Instanz- und statischen Methoden

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

js
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 mit traditioneller funktionsbasierter Syntax im nicht-strikten Modus umschreiben, dann werden this Methodenaufrufe automatisch an globalThis gebunden. Im strikten Modus bleibt der Wert von this als undefined.

js
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)

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

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

Klassen

In diesem Artikel

Beschreibung

Definition von Klassen

Klassenrumpf

Konstruktor

Statische Initialisierungsblöcke

Methoden

Statische Methoden und Felder

Felderdeklarationen

Private Elemente

Vererbung

Auswertungsreihenfolge

Beispiele

Binden von this mit Instanz- und statischen Methoden

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN