js 闭包

原文链接是：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个闭包也就是三个对象，且各个对象之间是独立存在的。
希望对学习前端的朋友有帮助，谢谢。本文完！~