前端开发者闭包是js语言学习中一个必不可少的部分，如果你熟悉Angularjs框架，那么你会发现闭包在Angularjs中经常会使用到。如果你对闭包是什么东西或者连闭包都没听过的话，建议你先阅读一下大牛的文章。http://www.cnblogs.com/mzwr1982/archive/2012/05/20/2509295.html
文章通俗易懂，博主在初了解闭包时也是参考的该篇文章~ 废话不多说，正戏开始。 **题目:**下面一段html结构，如何实现当点li时输出该li的索引。
<ul>
<li>这是第一条alert(0);</li>
<li>这是第二条alert(1);</li>
<li>这是第三条alert(2);</li>
</ul>
误区：有的童鞋就会说，这个很好解决啊，，然后噼啪噼啪一顿敲，就成了下面这样。
<ul id=”test”>
<li>这是第一条alert(0);</li>
<li>这是第二条alert(1);</li>
<li>这是第三条alert(2);</li>
</ul>
<script type=”text/javascript”>
varelements=document.getElementById(‘test’).querySelectorAll(‘li’);
for (vari=0;i<elements.length;i++) {
elements[i].onclick=function(){
alert(i);
}
}
</script> 结果拿着上面的代码一运行，无论点哪一个都是alert出来2。这是因为在for循环是i一直在累加，最后i的值当然就是2了。为了解决这个我们只有想办法把每次的遍历li的索引给记录下来。下面就是我们闭包登场的时候了。 完整代码如下：
<!DOCTYPE html>
<html lang=”en”>
<head>
<metacharset=”UTF-8″>
<title></title>
</head>
<body>
<ulid=”test”>
<li>这是第一条</li>
<li>这是第二条</li>
<li>这是第三条</li>
</ul>
<script type=”text/javascript”>
varelements=document.getElementById(‘test’).querySelectorAll(‘li’);
for (vari=0;i<elements.length;i++) {
(function () { //用匿名函数构成一个闭包
varj=i;//将i的值保存到闭包的变量j中
elements[i].onclick=function(){
alert(j);
}
})();//立即调用该匿名函数
}
</script>
</body>
</html>
细心的朋友就会注意到我们原来绑定onclick事件的函数外面多了一个匿名函数，这个匿名函数就是构成一个闭包，并把j保存到该闭包的变量中。这样循环3次就会得到3个[color=DarkOrange]不同且独立[/color]的变量j，每一个变量j存在于单独的闭包中。如果你对OOP熟悉的话，这个匿名函数闭包其实就类似于一个对象，而j是这个对象的成员变量。for循环就产生了3个闭包也就是三个对象，且各个对象之间是独立存在的。
jsp基于数据库的前端开发|video弹幕前端开发|html5与前端系统开发
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册