Do you ever try to define a function in a loop, like an event handler for example, and find that it's always the last variable in the array that is pointed at by every event handler? It can take a while to debug this stuff. Let's say you do something like this:
var links = document.getElementsByTagName('a');
for (var i=0;i < links.length;i++) {
var link = links.item(i);
link.onclick = function() {
alert(link.href);
return false;
};
}
(Stupid example, I know). Well if you run this on a page, you would expect that everytime you click a link, you will get an alert with the href of that link. Well that's wrong! You actually get the href of the last link on the page every time!
This happens because of closures in JavaScript. You would expect that the link variable has the same value inside the onclick function as it does outside. But in fact, every time the loop comes around, link gets a new value, and actually the link variable in all those other onclick functions changes. So when the loop finishes, every onclick function will alert the href of the last link.
So to avoid this, you can do a few things. You can make a separate function that attaches the event like so:
function attachLinkEvent(link) {
link.onclick = function() {
alert(link.href);
return false;
};
}
var links = document.getElementsByTagName('a');
for (var i=0;i < links.length;i++) {
var link = links.item(i);
attachLinkEvent(link);
}
This works because inside the attachLinkEvent function, the value of link points at the argument, which is a copy of the link in the loop. This way it doesn't change when the original link changes. Confusing? You bet.
Rather than use this workaround, you can just avoid using the link variable altogether in the onclick function, and replace it with this. Inside an event handler like onclick, this will point at the element that the event handler is attached to. In this case, this points at the link:
var links = document.getElementsByTagName('a');
for (var i=0;i < links.length;i++) {
var link = links.item(i);
link.onclick = function() {
alert(this.href);
return false;
};
}
Of course, real life examples are a bit more complicated. There are also different workarounds to fix the problem. But typically, one of these two solutions will fix things.
For way more information on closures than you will ever need, read Richard Cornford's essay JavaScript Closures
Published on October 19th, 2006. © Jesse Skinner
