OOP mit JavaScript - Closures - Feinheiten
1. Ein Beispiel
..., das übrigens von besagtem Arno ist. Ich schmücke mich nicht gerne mit fremden Federn. Kommen wir mal zu der hier schon mehrfach erwähnten Problematik (siehe Tutorials), wo man in einer Schleife einen Event-Handler auf einen Link legt. Der Standardcode sieht dann vom Prinzip her meistens so aus.
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
links[i].onclick = function (e) {
e.preventDefault();
alert('Link Nr.: ' + (i + 1));
}
}
Das kann natürlich nicht funktionieren, da vor einem Klick die Schleife bereits durchlaufen wurde und man immer den letzten Wert bekommt. Ach ja,
das preventDefault verhindert, dass man zu dem angeklickten Link kommt. Nur nicht im IE, da benötigt man wieder eine
Extrawurst.
2. Ein Closure
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
links[i].onclick =
(
function () {
var link = i;
return function (e) {
e.preventDefault();
alert('Link Nr.: ' + (link + 1));
}
}
)();
}
Erläuterung
Ehrlich gesagt habe ich mit so einer Vorgehensweise noch nie gearbeitet. Darum hoffe ich mal, dass meine Erläuterungen hierzu korrekt sind. Zunächst mal bauen
wir uns mit links[i].onclick = (...)() einen Selbstzünder, der sofort ausgeführt wird.
Innerhalb dieses Selbstzünders erzeugen wir nun ein Closure, indem wir den Wert von i in der Variable link abspeichern
(var link = i;). Somit steht also immer der richtige Wert zur Verfügung.
Den Rest benötigen wir nur, um zu verhindern, dass man dann zum eigentlichen Link kommt. Die anonyme Funktion function (e) verhindert, dass
unser Selbstzünder direkt nach dem Laden der Seite ausgelöst wird, sondern nur bei einem Klick auf einen Link läuft. Das return ist dabei
der Rückgabewert, der benötigt wird um preventDefault auszulösen. Das Prinzip ist dasselbe wie bei einem Formular abschicken. Also die Sache
mit dem <form ... onsubmit="return checkForm();">.
3. Die Sache mit dem this
Das Problem habe ich euch ja schon an dieser Stelle gezeigt. Auch wenn ich mich hier nicht um die Details kümmere (interessiert eh keine Sau), so soll es sich hier ebenfalls um ein Closure handeln. Wenn es auch etwas Seltsames.
function Konstruktor() {
var that = this;
...
}
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt