javascript闭包

关于闭包的介绍,推荐两篇文章:

廖雪峰javascript教程-闭包:

http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143449934543461c9d5dfeeb848f5b72bd012e1113d15000

博客园园友:

http://www.cnblogs.com/onepixel/p/5062456.html

循环绑定事件,是个典型的闭包问题。

比如现在页面有四个头像,我点击切换

html代码如下:

 <div id="imgList">
<img src="../images/001.jpg" class="on" />
<img src="../images/002.jpg" />
<img src="../images/003.jpg" />
<img src="../images/004.jpg" />
</div>

那么循环绑定事件,我们会大概会这么写:

for (var i = 0; i < images.length; i++) {
images[i].onclick = function () {
images[i].className="on";
}
}

这么写的话,点击图片的时候,调用方法,i已经是4了,所以images[4].className就报错了。

根据闭包的知识,我们修改成如下写法:

  var imageList = document.getElementById("imgList");
imageList.imageSelected = 0;
var images = imageList.children;
for (var i = 0; i < images.length; i++) {
images[i].onclick = (function (num) {
return function () {
if (imageList.imageSelected == num) return;
images[imageList.imageSelected].className = '';
this.className = "on";
imageList.imageSelected = num;
}
})(i);
}

里面用到了立即执行函数,这样的话每个i就能对应上了。

上一篇:20145301&20145321&20145335实验五


下一篇:多项式与三角函数求导——BUAA OO 第一单元作业总结