Javascript 添加事件 传入参数 闭包

在用javascript开发html页面的时候, 我们经常遇: 遍历一个某些DOM 结点, 给它添加event, 代码大概如下

var nodeValue = null;
for (var i in domNodes) {
    nodeValue = domNodes[i].val();
    domNodes[i].click(function(){
        //do something, but we need to nodeValue to identify
        console.log(nodeValue);
    });
}

运行下来, 发现所有的click事件, 传入的都是最后一次loop的nodeValue 值.

这是为什么?

nodeValue 作为一个local variable, 一般情况下执行完这段代码, 它的生命周期就应该结束了, 它就在内存不存在了, 可是在这段代码, click事件的这个匿名函数却在内部使用了这个值, 形成了闭包, 所以它的生命周期被延长. 同时这个匿名函数在这里只是被定义, 并不被执行(当触发click事件时候, 才会执行). 这个Loop 在最后一次循环后, 它的值被最后确定为最后一个loop的值, 当有click事件被触发时候, 它的值自然是最后一次赋的值. 

如何解决?

那么我们要现在要解决的是: 传入这次循环时候的值, 而不是最后的值. 同时, 这个click 方法接受的是一个 function. 方法如下: 

domNodes[i].click(function(curValue){

return function(){
    //do something, but we need to curValue to identify
    console.log(curValue);
};

}(nodeValue););

首先定义一个匿名函数, 并且声明一个形参, 同时执行这个匿名函数(通过后面加()执行). 那么这个当前值就被传入了. 同时在这个外层匿名函数内部返回一个匿名function, 同时这个内部函数使用了外部函数传入的值, 那么这个外部传入的值的生命周期被延长, 形成闭包, 那么就可以在真正触发click事件的时候使用到了这个值.