Prototypes
Unter den Klassen liegt das Prototypen-System: Objekte erben direkt von anderen Objekten.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
Die Prototypen-Kette
Findet JavaScript eine Eigenschaft nicht am Objekt, sucht es am Prototypen weiter — und an dessen Prototypen.
Diese Kette endet bei Object.prototype und erklärt, warum jedes Objekt toString besitzt.
const zahlen = [1, 2, 3];
Object.getPrototypeOf(zahlen) === Array.prototype; // true
// map lebt auf Array.prototype, nicht auf dem Array selbstKlassen sind Prototypen
class ist im Kern Syntax über diesem System: Methoden landen auf dem Prototypen der Klasse.
Deshalb teilen sich alle Instanzen dieselben Methoden, ohne sie zu kopieren.
Vertiefung
Die Prototypen-Kette verstehen
Jedes Objekt hat einen Prototypen. Wird eine Eigenschaft nicht am Objekt gefunden, sucht JavaScript in der Kette weiter. Deshalb haben Arrays map und Objekte toString.
class ist Syntax über diesem System: Methoden landen auf dem Prototypen. Für eigene Objekte kannst du Object.create nutzen, um gezielt einen Prototypen zu setzen.
const zahlen = [1, 2, 3];
console.log(Object.getPrototypeOf(zahlen) === Array.prototype);
console.log(typeof zahlen.map); // functionMerksatz: Methoden leben auf Prototypen, nicht auf jeder Instanz. Die Kette erklärt Vererbung in JavaScript.
Übungsaufgabe
Prototyp-Kette
Erzeuge mit Object.create ein Objekt, das eine Methode von einem Prototypen erbt. Prüfe die Kette mit Object.getPrototypeOf.
Das soll dein Programm können
- Ein Prototyp-Objekt mit Methode
- Object.create verwenden
- Eigene Eigenschaft am Kind
- Kette mit getPrototypeOf ausgeben
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
const hund = Object.create(tier); setzt tier als Prototyp. Danach kannst du hund.laut() aufrufen.
Lösung anzeigen
const tier = {
laut() { return "Geräusch"; }
};
const hund = Object.create(tier);
hund.name = "Bello";
console.log(hund.name);
console.log(hund.laut());
console.log(Object.getPrototypeOf(hund) === tier);Warum funktioniert das?
hund besitzt name selbst, laut kommt vom Prototypen tier. getPrototypeOf macht die Vererbung sichtbar.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Der Lernzähler
Baue einen kleinen Zähler, der bei jedem Klick hochzählt und den Wert im DOM anzeigt. Erweitere ihn um einen Reset-Button.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.