原文链接是:http://www.w3cfuns.com/blog-5478103-5409749.html
<p>闭包是js语言学习中一个必不可少的部分,如果你熟悉Angularjs框架,那么你会发现闭包在Angularjs中经常会使用到。如果你对闭包是什么东西或者连闭包都没听过的话,建议你先阅读一下大牛的文章。http://www.cnblogs.com/mzwr1982/archive/2012/05/20/2509295.html</p> 文章通俗易懂,博主在初了解闭包时也是参考的该篇文章~
<p>废话不多说,正戏开始。</p>
题目:下面一段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"> var elements = document.getElementById('test').querySelectorAll('li'); for (var i = 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> <meta charset="UTF-8"> <title></title> </head> <body> <ul id="test"> <li>这是第一条</li> <li>这是第二条</li> <li>这是第三条</li> </ul> <script type="text/javascript"> var elements = document.getElementById('test').querySelectorAll('li'); for (var i = 0; i < elements.length; i++) { (function () { //用匿名函数构成一个闭包 var j = i; //将i的值保存到闭包的变量j中 elements[i].onclick = function () { alert(j); } })(); //立即调用该匿名函数 } </script> </body> </html>
细心的朋友就会注意到我们原来绑定onclick事件的函数外面多了一个匿名函数,这个匿名函数就是构成一个闭包,并把j保存到该闭包的变量中。这样循环3次就会得到3个不同且独立的变量j,每一个变量j存在于单独的闭包中。如果你对OOP熟悉的话,这个匿名函数闭包其实就类似于一个对象,而j是这个对象的成员变量。for循环就产生了3个闭包也就是三个对象,且各个对象之间是独立存在的。
希望对学习前端的朋友有帮助,谢谢。本文完!~