JavaScript-Programmierung von Kopf bis Fuß

528 Kapitel 12

Wie ein Konstruktor tatsächlich arbeitet

Hinter den

Kulissen

Wie Konstruktoren funktionieren

Inzwischen wissen wir, wie ein Konstruktor deklariert wird und wie wir ihn zur

Erzeugung von Objekten benutzen können. Wir sollten aber auch hinter die Kulissen

schauen, um zu sehen, wie ein Konstruktor tatsächlich funktioniert. Um Konstruktoren

zu verstehen, müssen wir wissen, was der new-Operator eigentlich tut.

Wir beginnen mit der Anweisung zur Erzeugung von Fido:

1

Zu Beginn erzeugt new ein neues leeres Objekt.

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

Sehen Sie sich einmal die rechte Seite der Zuweisung an, wo die

spannenden Sachen passieren. Wir verfolgen die Ausführung einfach mit:

2

Als Nächstes sorgt new dafür, dass this auf das

neue Objekt zeigt.

Wie Sie aus Kapitel 5

wissen, enthält this

eine Referenz auf das

aktuelle Objekt, mit

dem sich unser Code

gerade beschäftigt.

3

Wenn das gemacht ist, können wir die Funktion

Dog aufrufen und ihr "Fido", "Mischling" und 17

als Argumente übergeben.

this

function Dog(name, breed, weight) {

this.name = name;

this.breed = breed;

this.weight = weight;

}

"Fido" "Mischling" 17

this

name: "Fido"

this

name: "Fido"

breed: "Mischling"

this

name: "Fido"

breed: "Mischling"

weight: 17

4

Danach wird der Körper der Funktion aufgeru-

fen. Wie bei den meisten Konstruktoren weist

Dog die Werte den Eigenschaften im neu er-

zeugten this-Objekt zu.

Die Ausführung des Körpers der Dog-

Funktion passt die drei allgemeinen Eigen-

schaften für uns an und weist ihnen die

Werte der übergebenen Parameter zu.

Sie sind hier � 529

Fortgeschrittene Objektkonstruktion

Hinter den

Kulissen

5

Schließlich ist die Ausführung der Dog-Funktion beendet,

und der new-Operator gibt this zurück, also eine Referenz

auf das neu erzeugte Objekt. Beachten Sie, dass this

automatisch zurückgegeben wird. In Ihrem Code wird also

keine explizite return-Anweisung benötigt. Nach der

Rückgabe des neuen Objekts weisen wir die Referenz der

Variablen fido zu.

name: "Fido"

breed: "Mischling"

weight: 17

fido

Unten sehen Sie etwas fehlerhaften JavaScript-Code. Tun Sie, als seien Sie

der Browser, und finden Sie die Programmierfehler. Wenn Sie mit

der Übung fertig sind, sehen Sie am Ende des Kapitels nach, ob Sie

wirklich alle gefunden haben. Und weil wir schon in Kapitel 12

sind, dürfen Sie auch den Programmierstil kritisieren. Das haben

Sie sich verdient.

SPIELEN Sie Browser

function widget(partNo, size) {

var this.no = partNo;

var this.breed = size;

}

function FormFactor(material, widget) {

this.material = material,

this.widget = widget,

return this;

}

var widgetA = widget(100, "gross");

var widgetB = new widget(101, "klein");

var formFactorA = newFormFactor("Plastik", widgetA);

var formFactorB = new ForumFactor("Metall", widgetB);