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事件的时候使用到了这个值.