JavaScript-Programmierung von Kopf bis Fuß

604 Kapitel 13

Die call-Methode verwenden

function Dog(name, breed, weight) {

this.name = name;

this.breed = breed;

this.weight = weight;

}

function ShowDog(name, breed, weight, handler) {

Dog.call(this, name, breed, weight);

this.handler = handler;

}

Dog.call Schritt für Schritt

Die Verwendung von Dog.call für den Aufruf von Dog ist am Anfang nicht leicht zu verstehen.

Daher wollen wir das noch einmal durchgehen. Wir beginnen mit dem überarbeiteten Code.

Wir wollen, dass sich der

Code im Dog-Konstruktor

um die Zuweisung der

Eigenschaften name, breed

und weight kümmert.

Dog hat aber keine Ahnung von

handler. Daher müssen wir uns in

ShowDog darum kümmern.

Das kann man sich folgendermaßen vorstellen: Zuerst rufen wir ShowDog mit dem new-Operator auf. Wie Sie

wissen, erstellt new ein neues leeres Objekt und weist es im Körper von ShowDog der Variablen this zu.

function ShowDog(name, breed, weight, handler) {

Dog.call(this, name, breed, weight);

this.handler = handler;

}

var scotty = new ShowDog("Scotty", "Scottish Terrier", 7.5, "Cookie");

Dann führen wir den Körper der ShowDog-Konstruktorfunktion aus.

Am Anfang steht der Aufruf von Dog mithilfe der call-Methode. Sie

ruft die Dog-Funktion auf und übergibt als Argumente this sowie die

Parameter name, breed und weight.

Das durch new für

ShowDog erzeugte

this-Objekt wird als

this im Körper von

Dog verwendet.

Nachdem die Dog-Funktion beendet ist, führen wir den Code in

ShowDog zu Ende aus. (Beachten Sie, dass es keinen Rückgabe-

wert gibt, da Dog ohne new-Operator aufgerufen wurde.) Hier-

bei weisen wir der Eigenschaft this.handler den Wert des

Parameters handler zu. Und da wir für den Aufruf von ShowDog

den new-Operator verwendet haben, wird jetzt eine neue Ins-

tanz von ShowDog zurückgegeben, inklusive der Eigenschaften

für Name, Rasse, Gewicht und Hundeführer.

Diese drei Eigenschaften

werden der Dog-

Funktion im Code von

this zugewiesen.

Der Körper von Dog

wird wie gewohnt

ausgeführt. Nur ist this

jetzt ein ShowDog- und

kein Dog-Objekt mehr.

this

name:

breed:

weight:

handler:

ShowDog

name: "Scotty"

breed:

"Scottish Terrier"

weight: 7.5

handler: "Cookie"

ShowDog

Diese Eigenschaft wird

this in der ShowDog-

Funktion zugewiesen.

Sie sind hier � 605

Prototypen verwenden

function ShowDog(name, breed, weight, handler) {

Dog.call(this, name, breed, weight);

this.handler = handler;

}

ShowDog.prototype = new Dog();

ShowDog.prototype.constructor = ShowDog;

ShowDog.prototype.league = "Webville";

ShowDog.prototype.stack = function() {

console.log("Aufstellung (stack)");

};

ShowDog.prototype.bait = function() {

console.log("Ködern (bait)");

};

ShowDog.prototype.gait = function(kind) {

console.log(kind + "e");

};

ShowDog.prototype.groom = function() {

console.log("Hundefrisör (groom)");

};

var fido = new Dog("Fido", "Mischling", 17);

var fluffy = new Dog("Fluffy", "Pudel", 15);

var spot = new Dog("Spot", "Chihuahua", 5);

var scotty = new ShowDog("Scotty", "Scottish Terrier", 7.5, "Cookie");

var beatrice = new ShowDog("Beatrice", "Spitz", 2.5, "Hamilton");

fido.bark();

fluffy.bark();

spot.bark();

scotty.bark();

beatrice.bark();

scotty.gait("Geh");

beatrice.groom();

Der letzte Probelauf

JavaScript-Konsole

Fido macht Wuff!

Fluffy macht Wuff!

Spot macht WUFF!

Scotty macht Yip!

Beatrice macht Yip!

Gehe

Hundefrisör (groom)

Gut gemacht! Sie haben ein fantastisches Codedesign erstellt, von dem der

Webville-Hundezüchterverein bestimmt begeistert sein wird. Machen Sie

einen letzten großen Probelauf mit allen Hunden, damit sie noch einmal mit

allen ihren hündischen Fähigkeiten glänzen können.

Erstellen Sie ein

paar Hunde und

Ausstellungshunde.

Probieren Sie alles sorgfältig aus,

um sicherzugehen, dass die Hunde

sich richtig benehmen.

Der Hundezüchter-

verein von Webville

wird es lieben!

Hier sehen Sie den gesamten

ShowDog-Code am Stück. Bauen

Sie ihn in Ihre Datei mit dem

Dog-Code ein, um alles zu testen.

Wir haben am Ende etwas

Testcode hinzugefügt.