深入学习javascript:闭包
闭包意味着内层的函数可以引用外层函数内的变量,即使外层函数的执行已经终止,引用依然存在。
看下面这个例子:有这样一个导航
<ul>
<li>随笔</li>
<li>文章</li>
<li>新闻</li>
</ul>
为每一个itm添加点击事件:
var liEle=document.getElementsByTagName('li');
for(var i=0;i<liEle.length;i++){
liEle[i].onclick=function(){
alert(i);
}
}
alert(i)调用的是外部函数的局部变量,这时它应该是liEle.length.因为在事件触发时,外部函数已经执行完毕 ,所以i=liEle.length。但是,我们如果想保存每个li元素i,该如何做呢?有一个种方法是给li对象添加一个属性,即变成这样:
var liEle=document.getElementsByTagName('li');
for(var i=0;i<liEle.length;i++){
liEle[i].index=i;
liEle[i].onclick=function(){
alert(this.index);
}
}
这样做可以,但是不好,因为你增加了变量,有没有更好的办法呢?有的。
var liEle=document.getElementsByTagName('li');
for(var i=0;i<liEle.length;i++){
liEle[i].onclick=function(index){
return function(){alert(index);}
} (i);
}
为什么这样行?看红色字体的部分,有了它,那么它所属的那个匿名函数被执行了,这个函数的局部变量index已经被赋值了i,而且它返回一个函数,这是event handler,被绑定到了onclick事件。事件被触发,函数被执行,alert(index)里面的index是对外部函数变量的引用,外部函数已经被执行,所以这个index就是你想要的那个i。
企鹅的面试我的一道题,没想起来,被bs了,~~~~(>_<)~~~~
参考:http://jibbering.com/faq/notes/closures/