576 Kapitel 13
Prototypen anpassen
Den Prototyp einrichten
Wie gesagt, können Sie über die Konstruktoreigenschaft prototype des Dog-
Konstruktors auf dessen Prototyp-Objekt zugreifen. Aber welche Eigenschaften
und Methoden enthält dieses Objekt? Sofern Sie keine definieren, sind das nicht
viele. Es ist also Ihre Aufgabe, den Prototyp mit Eigenschaften und Methoden anzu-
reichern. Das machen wir üblicherweise vor der Benutzung des Konstruktors.
Also erstellen wir zunächst den Hund-Prototyp. Als Ausgangspunkt brauchen wir
einen Konstruktor. Wie der aussehen muss, sagt uns das Objektdiagramm:
Dog.prototype.species = "Hund";
Dog.prototype.bark = function() {
if (this.weight > 12.5) {
console.log(this.name + " macht Wuff!");
} else {
console.log(this.name + " macht Yip!");
}
};
Dog.prototype.run = function() {
console.log("Lauf!");
};
Dog.prototype.wag = function() {
console.log("Wedle!");
};
function Dog(name, breed, weight) {
this.name = name;
this.breed = breed;
this.weight = weight;
}
name: "Spot"
breed: "Chihuahua"
weight: 5
Dog
Hier ist der Konstruktor
für die Erstellung von
Hund-Instanzen. Jede
Instanz hat einen eigenen
Namen, eine Rasse und
ein Gewicht. Daher bauen
wir sie in den Konstruk-
tor ein.
Aber unsere Methoden kommen jetzt vom Prototyp,
wir brauchen sie also im Konstruktor nicht mehr.
Prima, jetzt haben wir einen Konstruktor. Als Nächstes wollen wir unseren
Hund-Prototyp erstellen. Er soll eine species-Eigenschaft und die
Methoden bark, run und wag besitzen. Und so machen wir das:
Hier weisen wir der Prototyp-Eigenschaft
species den String »Hund« zu.
Und für jede Methode weisen wir den
Prototyp-Eigenschaften bark, run und wag
die entsprechenden Funktionen zu.
Seriöses Coden
Vergessen Sie nicht die Verkettung:
Dog.prototype.species
Beginnen Sie bei Dog und holen Sie sich seine prototype-
Eigenschaft. Sie enthält eine Referenz auf ein Objekt
mit der Eigenschaft species.
Sie sind hier � 577
Prototypen verwenden
Testen Sie den Prototyp mit ein paar Hunden
function Dog(name, breed, weight) {
this.name = name;
this.breed = breed;
this.weight = weight;
}
Dog.prototype.species = "Hund";
Dog.prototype.bark = function() {
if (this.weight > 12.5) {
console.log(this.name + " macht Wuff!");
} else {
console.log(this.name + " macht Yip!");
}
};
Dog.prototype.run = function() {
console.log("Lauf!");
};
Dog.prototype.wag = function() {
console.log("Wedle!");
};
var fido = new Dog("Fido", "Mischling", 17.5);
var fluffy = new Dog("Fluffy", "Pudel", 15);
var spot = new Dog("Spot", "Chihuahua", 5);
fido.bark();
fido.run();
fido.wag();
fluffy.bark();
fluffy.run();
fluffy.wag();
spot.bark();
spot.run();
spot.wag();
Jetzt können Sie diesen Code in eine Datei übertragen (»dog.html«) und
zum Testen im Browser aufrufen. Hier noch einmal der Code inklusive der
Änderungen der vorigen Seite und etwas Testcode. Stellen Sie sicher, dass Ihre
Hunde wie erwartet bellen, herumrennen und mit dem Schwanz wedeln.
Jeder Hund kann
bellen (bark),
herumrennen
(run) und mit
dem Schwanz
wedeln (wag).
Wunderbar.
Einen Moment, wollte Spot beim
Bellen nicht »WUFF!« sagen?
Dies ist der Dog-Konstruktor.
Und hier erhält der Hund-Prototyp
seine Eigenschaften und Methoden.
Wir fügen dem Prototyp
eine Eigenschaft und drei
Methoden hinzu.
Jetzt können wir wie gewohnt
die Hunde erzeugen …
… und dann rufen wir
die Methoden für
jeden Hund wie üblich
auf. Jeder Hund erbt
die Methoden von
seinem Prototyp.
JavaScript-Konsole
Fido macht Wuff!
Lauf!
Wedle!
Fluffy macht Wuff!
Lauf!
Wedle!
Spot macht Yip!
Lauf!
Wedle!
578 Kapitel 13
Den Prototyp überschreiben
Das große WUFF! für Spot
Hey, vergesst mich
nicht! Ich brauche ein
größeres WUFF!
Keine Sorge, wir haben Spot nicht vergessen. Spot wollte ein
großes »WUFF!« haben. Hierfür müssen wir den Prototyp
überschreiben und ihm eine eigene bark-Methode geben. Zu
diesem Zweck aktualisieren wir den Code wie folgt:
...
var spot = new Dog("Spot", "Chihuahua", 5);
spot.bark = function() {
console.log(this.name + " macht WUFF!");
};
// Aufrufe für fido und fluffy bleiben gleich
spot.bark();
spot.run();
spot.wag();
Die einzige Änderung, die
wir vornehmen müssen,
ist, Spot seine eigene
bark-Methode zu geben.
Der Aufruf der bark-Methode für
Spot muss nicht verändert werden.
Probefahrt für die spezielle bark-Methode
Bauen Sie den neuen Code ein und
machen Sie eine kleine Probefahrt.
Spot bekommt
die gewünschte
»WUFF!«-
Ausgabe.
Hier kommt der übrige Code hin. Wir schützen einfach
ein paar Bäume oder Bits oder Ihren CO
2
-Fußabdruck
– oder irgendwas anderes …
JavaScript-Konsole
Fido macht Wuff!
Lauf!
Wedle!
Fluffy macht Wuff!
Lauf!
Wedle!
Spot macht WUFF!
Lauf!
Wedle!
Get JavaScript-Programmierung von Kopf bis Fuß now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
