js 闭包

2017-10-10  本文已影响0人  长弓简

工作中遇到了一个问题,定位一个含有变量值得dom节点,用for循环给这个dom节点绑定事件,结果发现绑定事件后传到方法里的值是定值,而不是for循环的变量值,这里可以用闭包给每个变量的dom节点绑定事件。

先看两段在网上找到的例子方法:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<script>
window.onload = function(){
var aLi = document.getElementsByTagName('li');
for (var i=0;i<aLi.length;i++){
aLi[i].onclick = function(){ //当点击时for循环已经结束
alert(i);
};
}
}
</script>
</head>
<body>
<ul>
<li>123</li>
<li>456</li>
<li>789</li>
<li>010</li>
</ul>
</body>
</html>
上面这段代码是不用闭包,你会发现每次输出的都是定值4,如果你想给每个li绑定自身的事件,就需要使用闭包了,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<script>
window.onload = function(){
var aLi = document.getElementsByTagName('li');
for (var i=0;i<aLi.length;i++){
(function(i){
alert(i);
aLi[i].onclick = function(){
alert(i);
};
})(i);
}
};
</script>
</head>
<body>
<ul>
<li>123</li>
<li>456</li>
<li>789</li>
</ul>
</body>
</html>
上面这段代码就使用了闭包在for循环中定义一个方法, 把变量值i传进去这样i这个局部变量就不会被js的垃圾处理机制给释放掉。

下面在看一下我在工作中遇到的代码:


image.png

在这里我用了两种方法:
如代码中的1处,传进去的是event对象,我在对象中找到唯一的dom节点再用字符串分割的方式取到具体的数字下标,如代码中的红框处:


image.png
代码中2处,用的就是闭包的形式,定义了一个函数方法,在方法中用dom节点去取值,但是需要注意的是这里面不能用jQuery的方法去给dom节点绑定事件,会绑定不上去,具体原因容后深究。
上一篇下一篇

猜你喜欢

热点阅读