JavaScript闭包

百度这样说：

要执行的代码块（由于自由变量的存在，相关变量引用没有释放）和为自由变量提供绑定的计算环境（作用域）。

经过一番学习，自己写了一个，下面是HTML：

<div>列表中的第1个div</div>
<div>列表中的第2个div</div>
<div>列表中的第3个div</div>
<div>列表中的第4个div</div>
<div id="msg"></div>

我将给每个div绑定一个onmouseover事件，这个是错误的JavaScript：

 

var el = document.getElementsByTagName("div");
var msg = document.getElementById("msg");
for(var i = 0;i < el.length;i ++){
    el[i].onmouseover = function(){
        //随机颜色
        var t = '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6);
        msg.style.color = t;
        msg.innerHTML = "您划过了第" + (i + 1) + "个div标签";
    };
}

结果是每次都是第6个：

 

修改后的js：

var el = document.getElementsByTagName("div");
var msg = document.getElementById("msg");
for(var i = 0;i < el.length;i ++){
    //闭包从这里开始
    (function(){
    var d = i;
    el[d].onmouseover = function(){
        //随机颜色
        var t = '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6);
        msg.style.color = t;
        msg.innerHTML = "您划过了第" + (d + 1) + "个div标签";
    };
    })();
    //闭包到这里结束
}

 

 

将当前的i赋值给d，d声明在一个匿名函数里，并执行了这个匿名函数。

------------------------------------------------------------------

新说：2010-09-07补充

上面的脚本完全可以这样写：

var el = document.getElementsByTagName("div");
var msg = document.getElementById("msg");
for(var i = 0;i < el.length;i ++){
    (function(d){
    el[d].onmouseover = function(){
        var t = '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6);
        msg.style.color = t;
        msg.innerHTML = "您划过了第" + (d + 1) + "个div标签";
    };
    })(i);//变化在这里，以变量的方式传参进去  
}