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()来取得当前的索引也可以达到同样的效果。我个人在实际的开发中比较喜欢这样做,因为增加自定义属性,并不会影响什么。)

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值