我们在学javascript的时候是否遇到过这样的代码,例如我们要在onload事件里循环遍历一个数组,对遍历到的数组元素进行操作。需要用到this对象,如下代码所示:
onload = function () {
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
links[i].onclick = function ()
//这样只有最后一个标签的内容可以显示出来
alert(links[i].innerHTML);
};
}
};
这里对一种类型的标签(假设是浏览器中所有a标签)进行遍历,并获取个当前标签元素,当点击标签时,浏览器会弹出标签中的内容。考虑一下,上面的程序能否执行成功,答案是否定的。很显然,这个遍历写在了onload的事件里了,当浏览器加载完毕后,这个i已经遍历结束了,而在出发onclick事件的时候,我们获取到的是最后一个标签元素。
对于这种情况,我们一般是用this代替links[i],来完成的。那么怎样使用links[i],也可以完成类似的操作呢。闭包就可以解决。如下所示
onload = function () {
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
links[i].onclick = (function () {
var res = i;
//因为闭包内要使用i,所以外层i还依旧存在内存中
return function () {
alert(links[res].innerHTML);
alert(typeof this);
}
})();
}
}
这里我是这样理解的,程序运用了闭包原理,而闭包幽灵就是i 变量,它在第二个function()的外面,而function内部引用了i变量,所以导致浏览器在加载的时候保留了i变量遍历结束之前的数据,当某个标签被点击后,便能找到它所在数组的位置,从而对其作出相应的操作。
此段代码亲测,可以执行。至于更深次的理解,需要在不断的学习中探索。