JavaScript Class-Syntax

Einführung in die JavaScript Class-Syntax

Eine Klasse ist eine Vorlage zum Erstellen von Objekten, die dieselbe Form und dasselbe Verhalten teilen. Anstatt denselben Konstruktorfunktions-und-Prototyp-Boilerplate von Hand zu schreiben, beschreibt man das Objekt einmal und erstellt beliebig viele Instanzen davon. Klassen wurden in ECMAScript 2015 (ES6) eingeführt und sind zur Standardmethode für die Modellierung objektorientierten Codes in JavaScript geworden.

Dieses Kapitel behandelt die Grundlagen: wie man eine Klasse deklariert, was der constructor macht, wie man Methoden, Getter/Setter und öffentliche Felder hinzufügt, den Unterschied zwischen Klassendeklarationen und Klassenausdrücken sowie zwei Punkte, die häufig zu Verwirrung führen — Klassen sind intern Funktionen, und sie werden nicht wie reguläre Funktionen gehoisted.

Eine Klasse definieren

Eine Klasse wird mit dem Schlüsselwort class deklariert, gefolgt von einem Namen und einem Rumpf in geschweiften Klammern:

class MyClass {
  // class body
}

Per Konvention verwenden Klassennamen PascalCase (Rectangle, UserAccount). Der Rumpf enthält Methoden, Getter/Setter und Felder — beachte jedoch, dass Mitglieder, anders als bei object-Literalen, nicht durch Kommas getrennt werden.

Der Constructor

Der constructor ist eine spezielle Methode, die automatisch ausgeführt wird, wenn mit new eine Instanz erstellt wird. Seine Aufgabe ist es, Argumente entgegenzunehmen und die Eigenschaften des neuen Objekts über this zu initialisieren:

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

Eine Klasse kann höchstens einen constructor haben. Lässt man ihn weg, stellt JavaScript automatisch einen leeren bereit.

Eine Instanz erstellen

Verwende das Schlüsselwort new, um eine Instanz zu erzeugen. new erstellt ein neues object, bindet es an this, führt den constructor aus und gibt das object zurück:

Klassen-Methoden

Im Rumpf deklarierte Methoden werden dem Prototyp der Klasse hinzugefügt, sodass alle Instanzen eine gemeinsame Kopie nutzen, anstatt jeweils eine eigene zu erhalten. Innerhalb einer Methode verweist this auf die Instanz, auf der sie aufgerufen wurde:

Klassenmethoden sind nicht-enumerierbar, das heißt, sie erscheinen nicht in einer for...in-Schleife oder in Object.keys() — ein weiterer Unterschied zwischen Klassen und gewöhnlichen Objekten, bei denen hinzugefügte Methoden enumerierbar sind.

Getter und Setter

Ein Getter ermöglicht es, einen berechneten Wert wie eine Eigenschaft zugänglich zu machen; ein Setter ermöglicht das Abfangen einer Zuweisung. Stelle einer Methode get oder set voran:

Getter und Setter eignen sich ideal für Validierung oder abgeleitete Werte. Unter Property getters and setters findest du eine ausführlichere Betrachtung.

Öffentliche Klassenfelder

Instanzeigenschaften können direkt im Klassenrumpf deklariert und initialisiert werden, ohne sie im constructor zu schreiben. Dies sind öffentliche Klassenfelder:

Felder werden jeder Instanz (nicht dem Prototyp) zugewiesen, bevor der constructor-Rumpf ausgeführt wird. Für Felder, die vor externem Code verborgen bleiben sollen, verwendet man private Felder (das Präfix #) — behandelt in Private and protected properties and methods.

Statische Methoden

Eine static-Methode gehört zur Klasse selbst, nicht zu ihren Instanzen. Statische Member eignen sich gut für Hilfsfunktionen oder Factory-Funktionen, die mit der Klasse zusammenhängen, aber keine bestimmte Instanz benötigen:

Klassen unterstützen auch static-Felder und -Eigenschaften. Das vollständige Bild liefert Static properties and methods.

Klassenausdrücke

Genau wie Funktionen können Klassen als Ausdrücke definiert und einer Variablen zugewiesen werden. Klassenausdrücke können anonym oder benannt sein:

Dies ist nützlich, wenn man eine Klasse bedingt erstellen, sie als Argument übergeben oder aus einer Funktion zurückgeben möchte.

Klassen sind intern Funktionen

Eine Klasse ist im Grunde eine besondere Art von Funktion. Die class-Syntax ist weitgehend syntaktischer Zucker über dem älteren Konstruktorfunktions-und-Prototyp-Muster, mit einigen zusätzlichen Sicherheitsmechanismen:

Zu den zusätzlichen Sicherheitsmechanismen gehören: Der Rumpf läuft immer im Strict-Modus, Methoden sind nicht-enumerierbar, und ein Klassenkonstruktor kann nicht ohne new aufgerufen werden (ein solcher Aufruf wirft einen TypeError).

Klassen werden nicht gehoisted

Funktionsdeklarationen werden gehoisted — man kann sie aufrufen, bevor sie im Code erscheinen. Klassendeklarationen sind nicht nutzbar, bevor sie definiert sind. Sie werden zwar dem Namen nach gehoisted, verbleiben aber in der „temporal dead zone", sodass ein frühzeitiger Zugriff einen ReferenceError auslöst:

Deklariere eine Klasse immer, bevor du sie verwendest.

Zusammenfassung

JavaScript-Klassen geben objektorientiertem Code eine klare, vorhersehbare Struktur. In diesem Kapitel hast du gelernt, wie man eine Klasse deklariert, einen constructor schreibt, Prototyp-Methoden, Getter/Setter, öffentliche Felder und static-Methoden hinzufügt sowie Klassenausdrücke einsetzt. Behalte die zwei wichtigsten Punkte im Gedächtnis: Eine Klasse ist intern eine Funktion, deren Rumpf im Strict-Modus läuft und die nicht ohne new aufgerufen werden kann, und Klassendeklarationen werden nicht gehoisted.

Als nächste Schritte bieten sich das Erweitern von Klassen mit Class inheritance, das Gruppieren gemeinsamer Hilfsfunktionen mit Static properties and methods und das Verbergen interner Zustände mit Private and protected properties and methods an.

Übungen