首页 > 代码库 > javascript闭包

javascript闭包

2024-08-18 20:46:30   224人阅读

关于闭包的介绍，推荐两篇文章：

廖雪峰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就能对应上了。

 

javascript闭包


联系
我们