Klassenvererbung
TeaOrder baut auf Order auf: Getränk und Größe bleiben gemeinsam, nur extra gehört zur Tee-Bestellung.
Weg von Cookies
Die vorige Cookie-Seite endete mit theme / dark. Jetzt entstehen Objekte im Speicher, nicht gespeicherte Browserwerte.
Gemeinsames beim Elternteil
Order nimmt drink und size entgegen. Seine Methode label erzeugt die zweigeteilte Standardausgabe.
class Order {
constructor(drink, size) {
this.drink = drink;
this.size = size;
}
label() {
return this.drink + " / " + this.size;
}
}
const order = new Order("tea", "regular");
console.log(order.label());
tea / regular erscheint in der Konsole. Ein Order-Objekt erfüllt instanceof Order; die Methode wird nicht in jedes Objekt kopiert.
Der erste Schritt des Kindes
Mit extends Order wird die Beziehung festgelegt. Der Kind-Konstruktor muss den geerbten Teil zuerst aufbauen.
class Order {
constructor(drink, size) {
this.drink = drink;
this.size = size;
}
label() {
return this.drink + " / " + this.size;
}
}
class TeaOrder extends Order {
constructor(drink, size, extra) {
super(drink, size);
this.extra = extra;
}
}
const tea = new TeaOrder("tea", "regular", "mint");
console.log(tea.drink);
console.log(tea.extra);
Die Logs zeigen tea und danach mint. Vor super auf this.extra zuzugreifen löst einen ReferenceError aus.
Überschreiben mit Hilfe
TeaOrder darf label neu definieren. Für drink und size kann die Klasse dennoch die Elternmethode verwenden.
class Order {
constructor(drink, size) {
this.drink = drink;
this.size = size;
}
label() {
return this.drink + " / " + this.size;
}
}
class TeaOrder extends Order {
constructor(drink, size, extra) {
super(drink, size);
this.extra = extra;
}
label() {
return super.label() + " / " + this.extra;
}
}
console.log(new TeaOrder("tea", "regular", "mint").label());
Es entsteht tea / regular / mint. Dasselbe Objekt ist sowohl instanceof TeaOrder als auch instanceof Order.
Kleine Klassenfamilie
Order enthält Regeln für jede Bestellung; TeaOrder ergänzt nur die Besonderheit von Tee. Ein neuer Name allein rechtfertigt kein Kind.
Ausgabe im Dokument
Die Seite erzeugt TeaOrder und setzt den Text mit der überschriebenen Methode ein.
<!DOCTYPE html>
<html>
<body>
<p id="line">…</p>
<script>
class Order {
constructor(drink, size) {
this.drink = drink;
this.size = size;
}
label() {
return this.drink + " / " + this.size;
}
}
class TeaOrder extends Order {
constructor(drink, size, extra) {
super(drink, size);
this.extra = extra;
}
label() {
return super.label() + " / " + this.extra;
}
}
document.querySelector("#line").textContent =
new TeaOrder("tea", "regular", "mint").label();
</script>
</body>
</html>
Im Absatz steht tea / regular / mint. theme / dark stammt von Cookies, während tea / regular die unergänzte Elternausgabe ist.
Selbst ausprobieren
Erzeuge zuerst Order und dann TeaOrder mit mint. Setze super vor this.extra und erweitere das Ergebnis von super.label().
Typische Stolperstellen
Kein this vor super, keine vollständige Kopie von label und keine Annahme, dass das Kind kein Order mehr wäre.
Merksatz
extends verbindet die Klassen. super(...) initialisiert den Elternteil, und super.label() bewahrt dessen Arbeit.
🧠 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