深入理解JavaScript闭包-优快云博客

所谓闭包，概念是父函数的执行虽然完成，但是在父函数中嵌套的子函数仍然可以访问父函数的变量的权利。

就像这样：

 <script>
        function father() {
            var i = 10;
            return function () {
                console.log(i);
            }
        }

        father()();
    </script>

打印输出的结果是10。

那么，我们已经对闭包有了初级的认识了，现在，我们再加深一点儿：

 <script>
        function father() {
            var i = 10;
            return function () {
                i++;
                console.log(i);
            }
        }

        var next = father();

        for (var i = 0; i < 5; i++)
        {
            next();
        }
    </script>

这段代码在控制台输出的结果是11,12,13,14,15，由此我们可以得出结论，闭包中的数据是存在一个特定的内存区域的（如果学过C语言的同学，是不是觉得有点儿像static呢？哈哈）

但是，我们这儿如果稍微的改变一下，又是另一种情况。

<script>
        function father() {
            var i = 10;
            return function () {
                i++;
                console.log(i);
            }
        }


        for (var i = 0; i < 5; i++)
        {
            fathr()();
        }
    </script>

结果打印出来的都是11，为什么呢，因为我们每次调用的时候，这次的数据将上一次的数据覆盖掉了，所以打印了5次11。

接下来，我们说一个比较常见的应用场景，

 <script>

        window.onload = function () {

            var aAs = document.getElementsByTagName("a");//在页面上放了5个a以便测试

            for (var i = 0; i < aAs.length; i++)
            {
                aAs[i].onclick = function () {


                    console.log(i);//我们这儿访问的其实是闭包中的数据


                }
            }
        };
    </script>

打印出来的i每一个都是5，道理在何处呢？因为这个时候的i已经成了闭包中的数据。

那么，如果我想要打印出对应的索引该怎么办呢？

只需要稍微的进行修改即可:

 <script>
        window.onload = function () {
            var aAs = document.getElementsByTagName("a");//在页面上放了5个a以便测试

            for (var i = 0; i < aAs.length; i++)
            {

                aAs[i].index = i;//动态的挂载在每个a上面它对应的索引值
                aAs[i].onclick = function () {

                    console.log("我的索引:" + this.index);//通过this取出之前我们挂载的索引值。
                    console.log(i);
                }
            }
        };
    </script>

（这儿其实这种做法有点儿做作，我们其实可以在定义a标签的时候这样写，<a index="1">点我</a>,然后在循环的时候，通过getAttribute()来取得当前的索引也可以达到同样的效果。我个人在实际的开发中比较喜欢这样做，因为增加自定义属性，并不会影响什么。）

以上我的理解是在参考了一个著名的老师对闭包的讲解所写，对他表示感谢。