JavaScript-Klassen
Klassen bieten eine Syntax zum Definieren von Objekten mit Konstruktor und Methoden. Mit new entsteht eine Instanz; die Demo zeigt am Ende tea / regular / mint.
Klasse und Konstruktor definieren
Der Konstruktor läuft beim Erzeugen einer Instanz und initialisiert ihre Felder.
class Drink {
constructor(name, size) {
this.name = name;
this.size = size;
}
}
const order = new Drink("tea", "regular");
Der Konstruktor speichert die Werte im neuen Objekt. this bezeichnet die aktuelle Instanz, und new Drink(...) erzeugt sie und führt den Konstruktor aus.
Eine Instanzmethode hinzufügen
Methoden beschreiben Aktionen, die Instanzen ausführen können.
class Drink {
constructor(name, size) { this.name = name; this.size = size; }
label() { return this.name + " / " + this.size; }
}
const order = new Drink("tea", "regular");
console.log(order.label());
order.label() liefert tea / regular. Klassenmethoden liegen auf dem Prototyp und werden von den Instanzen gemeinsam genutzt.
Eine Klasse erweitern
extends stellt die Vererbung her, super(...) ruft den Elternkonstruktor auf und super.label() verwendet die geerbte Methode.
class SpecialDrink extends Drink {
constructor(name, size, extra) { super(name, size); this.extra = extra; }
fullLabel() { return super.label() + " / " + this.extra; }
}
const special = new SpecialDrink("tea", "regular", "mint");
console.log(special.fullLabel());
SpecialDrink erbt label() und ergänzt extra sowie fullLabel(). Die Ausgabe ist tea / regular / mint. Ein abgeleiteter Konstruktor muss super(...) vor der Verwendung von this aufrufen.
Statische Methoden und private Felder
Eine statische Methode gehört zur Klasse, nicht zu ihren Instanzen. Ein Feld wie #secret ist nur innerhalb der Klasse lesbar.
class Drink {
static kind() { return "drink"; }
#secret = "recipe";
reveal() { return this.#secret; }
}
console.log(Drink.kind());
console.log(new Drink().reveal());
Rufe die statische Methode mit Drink.kind() auf, nicht mit new Drink().kind(). Außerhalb der Klasse ist drink.#secret nicht zugänglich.
Klassen auf einer Seite sehen
Diese Demo schreibt das Ergebnis einer besonderen Instanz in das Dokument.
<p id="result"></p>
<script>
class Drink { constructor(name,size){this.name=name;this.size=size;} label(){return this.name+" / "+this.size;} }
class SpecialDrink extends Drink { constructor(name,size,extra){super(name,size);this.extra=extra;} fullLabel(){return super.label()+" / "+this.extra;} }
const order=new SpecialDrink("tea","regular","mint");
document.querySelector("#result").textContent=order.fullLabel();
</script>
Die Seite zeigt genau tea / regular / mint. Eine Klassendeklaration ist vor ihrer Deklaration nicht verwendbar; das ist die Temporal Dead Zone und keine irreführende Hoisting-Aussage.
Klassen ordnen die Erzeugung und das Verhalten von Objekten. Module ordnen dagegen Dateien, und eine direkt an einem Objekt definierte Methode ist etwas anderes. Verwende new für Instanzen und static für Klassenverhalten.
📊 Klassenmerkmale
| Syntax | Zweck | Beispiel |
|---|---|---|
constructor(...) |
Eine Instanz initialisieren | constructor(name, size) |
this |
Auf die aktuelle Instanz verweisen | this.name = name |
extends und super |
Verhalten des Elternteils wiederverwenden | class SpecialDrink extends Drink |
static |
Klassenmethode definieren | Drink.kind() |
Die Tabelle fasst die zentrale Klassensyntax dieser Lektion zusammen.
Praktische Übung
Erstelle Drink mit name, size und label(). Erstelle danach SpecialDrink mit extends, ergänze extra und lasse fullLabel() tea / regular / mint anzeigen. Rufe außerdem Drink.kind() auf.
Häufige Fehler
Rufe eine Instanzmethode nicht auf der Klasse auf, vergiss super(...) im abgeleiteten Konstruktor nicht und verwende this nicht davor.
Wichtig
Der Konstruktor initialisiert Felder, Methoden werden über den Prototyp geteilt, und Vererbung nutzt Verhalten erneut.
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt