JavaScript-Programmierung von Kopf bis Fuß

Sie sind hier � 477

Anonyme Funktionen, Geltungsbereiche und Closures

window.onload = function() { alert("Die Seite wurde geladen!"); };

Und hier wurde

der Handler ohne

unnötigen Namen

direkt der window.

onload-Eigenschaft

zugewiesen.

Wir erstellen also eine Funktion, die auf das load-Event reagiert. Gleichzeitig wissen wir, dass dies lediglich eine

»Einwegfunktion« ist, die nur beim Ladevorgang der Seite ausgeführt wird. Wir sehen auch, dass der window.

onload

-Eigenschaft eine Funktionsreferenz zugewiesen wird – namentlich die Funktionsreferenz in der Variablen

handler. Da handler aber bloß einmal gebraucht wird, wirkt die Benennung hier etwas übertrieben. Schließlich

brauchen wir den Namen nur, um die enthaltene Referenz an window.onload zu übergeben.

Mit anonymen Funktionen können wir diesen Code deutlich sauberer schreiben. Eine anonyme Funktion ist

einfach ein Funktionsausdruck ohne Name, der anstelle einer Funktionsreferenz benutzt wird. Um die Verbindung

herzustellen, zeigen wir Ihnen, wie man im Code eine Funktionsreferenz auch anonym benutzen kann.

Kurz und bündig. Wir weisen die benötigte

Funktion direkt der onload-Eigenschaft zu.

Und wir erzeugen keinen Funktionsnamen, der

versehentlich in anderem Code verwendet

wird (zumal handler ein ziemlich häufig

vorkommender Name ist!).

Anonyme Funktionen benutzen

function handler() { alert("Die Seite wurde geladen!"); }

window.onload = handler

;

Zuerst wird die Variable

handler entfernt, um hieraus

einen Funktionsausdruck zu

machen.

function() { alert("Die Seite wurde geladen!"); }

window.onload = ;

Dann wird der

Funktionsausdruck direkt

der Eigenschaft window.

onload property zugewiesen.

Mama, guck

mal! Keine

Namen!

Tipp: Verstecken sie sich vielleicht irgendwo in Ihren Objekten?

Gibt es Stellen in Ihrem bisherigen Code, der anonyme Funktionen enthält, ohne dass Sie es

bemerkt haben?

Kopf-

nuss

478 Kapitel 11

Übung zu anonymen Funktionen

Im unten stehenden Code gibt es ein paar Möglichkeiten, anonyme Funktionen zu

nutzen. Bauen Sie den Code so um, dass nach Möglichkeit anonyme Funktionen

verwendet werden. Bei Bedarf können Sie die alten Codeblöcke rausschmeißen und

durch neuen Code ersetzen. Und noch ein kleiner Nebenjob: Kreisen Sie die anonymen

Funktionen ein, die bereits im Code verwendet werden.

window.onload = init;

var cookies = {

instructions: "Ofen auf 175 Grad vorheizen …",

bake: function(time) {

console.log("Backe Kekse.");

setTimeout(done, time);

}

};

function init() {

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

button.onclick = handleButton;

}

function handleButton() {

console.log("Zeit, die Kekse zu backen.");

cookies.bake(2500);

}

function done() {

alert("Kekse sind fertig. Bitte herausnehmen und abkühlen lassen.");

console.log("Kekse kühlen ab.");

var cool = function() {

alert("Kekse sind abgekühlt. Zeit zum Essen!");

};

setTimeout(cool, 1000);

}

Spitzen Sie Ihren Bleistift