JavaScript-Programmierung von Kopf bis Fuß

506 Kapitel 11

Die Funktionsweise der Closure Schritt für Schritt

window.onload = function() {

var count = 0;

var message = "Sie haben mich ";

var div = document.getElementById("message");

var button = document.getElementById("clickme");

button.onclick = function() {

count++;

div.innerHTML = message + count + " Mal angeklickt!";

};

};

Wie die Klick mich!-Closure funktioniert

function() {

count++;

div.innerHTML = ...;

}

var message =

"Sie haben mich ";

var count = 0;

var div = [object]

Und jetzt weise ich der onclick-

Eigenschaft des Klick mich!-Buttons

die Closure zu. Damit ist der load-

Handler abgearbeitet. Nun muss ich

nur noch darauf warten, dass jemand

den Button auch anklickt.

Um zu verstehen, wie die Closure arbeitet, wollen wir dem

Browser bei der Auswertung des Codes ein wenig über die

Schulter gucken.

Die Seite ist geladen. Jetzt kann ich den

load-Handler ausführen. Dafür muss ich

ein paar Variablen definieren … und einen

Funktionsausdruck. Mal sehen … er referenziert

drei freie Variablen. Dann mache ich da wohl

besser eine Closure draus.

Der Browser erstellt eine Closure für die

Funktion, die der button.onclick-Eigenschaft

zugewiesen wurde. Die Umgebung enthält die

Variablen div, message und count.

Nach Beenden der window.

onload-Funktion passiert erst

einmal nichts, bis der Klick

mich!-Button angeklickt wird.

Sie sind hier � 507

Anonyme Funktionen, Geltungsbereiche und Closures

Aha, irgendjemand hat den

Button angeklickt. Es ist Zeit,

die click-Handlerfunktion

auszuführen, die ich vorher

schon bereitgelegt habe.

function() {

count++;

div.innerHTML = ...;

}

var message =

"Sie haben mich ";

var count = 0;

var div = [object]

Oh, offenbar haben wir hier eine

Closure. Gut, das heißt, ich finde

die Werte für freie Variablen in

der Umgebung.

onclick

Obwohl die button-Variable nicht mehr

existiert (sie wird nach Beenden der window.

onload-Funktion entfernt), befindet sich das

button-Objekt weiterhin im DOM und speichert

unsere Closure in seiner onclick-Eigenschaft.

function() {

count++;

div.innerHTML = ...;

}

var message =

"Sie haben mich ";

var count = 1;

var div = [object]

Ich habe die count-Variable um eins

inkrementiert und dafür gesorgt,

dass der Wert in der Umgebung

aktualisiert wird. Außerdem habe ich

die Nachricht auf den neuesten Stand

gebracht. Jetzt muss ich nur noch auf

einen neuen Klick warten.

Beachten Sie, dass die div-Variable in der Closure ein

Objekt enthält. Bei der Initialisierung von div in window.

onload haben wir das von document.getElementByID

zurückgegebene Objekt in der div-Variablen gespeichert. So

brauchen wir das Objekt nicht noch einmal aus dem DOM

zu holen. Hierdurch sparen wir etwas Rechenzeit, und unser

Code läuft ein kleines bisschen schneller.

Die Closure bleibt bestehen, bis

Sie die Seite schließen. So steht

sie immer zur Verfügung, wenn

der Button angeklickt wird.

508 Kapitel 11

Closure-Extrem-Herausforderung

Wir brauchen einen Experten für Closures und haben gehört, dass Sie das sind! Können Sie jetzt,

nachdem Sie wissen, wie Closures funktionieren, herausfinden, warum beide unten stehenden Proben

zu 008 ausgewertet werden? Um die Lösung zu finden, schreiben Sie alle in Umgebungen gespeicherten

Variablen unten auf. Denken Sie daran, dass es vollkommen in Ordnung ist, wenn eine Umgebung leer ist.

Überprüfen Sie Ihre Antwort am Ende des Kapitels.

JAVASCRIPT-EXTREM-HERAUSFORDERUNG

var secret = "007";

function getSecret() {

var secret = "008";

function getValue() {

return secret;

}

return getValue();

}

getSecret();

Probe1

var secret = "007";

function getSecret() {

var secret = "008";

function getValue() {

return secret;

}

return getValue;

}

var getValueFun = getSecret();

getValueFun();

Probe 2

noch einmal

Umgebung

Umgebung

Sie sind hier � 509

Anonyme Funktionen, Geltungsbereiche und Closures

Sehen Sie sich zuerst diesen Code an:

(function(food) {

if (food === "Kekse") {

alert("Bitte mehr");

} else if (food === "Kuchen") {

alert("Mjam mjam");

}

})("Kekse");

Sie sollen nicht nur herauszufinden, was bei diesem Code

berechnet wird, sondern auch, wie es berechnet wird. Gehen

Sie hierfür am besten rückwärts vor. Nehmen Sie die anonyme

Funktion heraus und weisen Sie sie einer Variablen zu. Benutzen

Sie diese Variable dann anstelle des Funktionsausdrucks. Ist der

Code jetzt verständlicher? Also, was macht er?

Die Verwendung eines

Funktionsausdrucks anstelle

einer Referenz, ins Extreme

getrieben.

Spitzen Sie Ihren Bleistift