资讯专栏INFORMATION COLUMN

javascript中闭包的一些理解

lansheng228 / 1016人阅读

摘要:众所周知,闭包的一个作用就是让一些变量始终保持在内存中,在此我用一些实际代码对这句话作进一步的理解。输出这个很好理解,不多说输出输出上述代码中,就是执行函数返回的匿名函数。

闭包是javascript中绕不开的话题,关于闭包的一些概念和应用,这方面资料比较多,在此就不再赘述。众所周知,闭包的一个作用就是 让一些变量始终保持在内存中 ,在此我用一些实际代码对这句话作进一步的理解。

demo1:
    function closure(){
      var n = 0;
      function test() {
        console.log(++n);
      }
      test() 
      test() 
    }
    closure(); //输出1,2(这个很好理解,不多说)
demo2:
    function test(){
        var i=0;
        return function(){
            console.log(i++);
        }
        }
        var fn = test();
        fn(); //输出0
        fn(); //输出1

上述代码中,fn就是执行函数test()返回的匿名函数。由于fn又是一个全局变量,生命周期一直存在,且这个匿名函数引用了父函数test里面的一个局部变量,所以变量i的状态会被一直保存.

demo3:
    function test(){
        var i=0;
        return function(){
            console.log(i++);
        }
    }
    test()(); //输出0
    test()(); //输出0

上述代码中,执行test()返回的是其内部的匿名函数,但是执行完test()()以后,该匿名函数的生命周期已经结束,所以变量i的状态没有得到保存。

最近在简书上读到一篇有趣的文章,其中一些代码如下:

for (var i = 0; i < 5; i++) {
 setTimeout((function(i) {
    console.log(i);
  })(i), i * 1000);
}   //输出0,1,2,3,4

上述代码中有一个setTimeout()函数,其使用格式为setTimeout(func,time),意思是至少过time时间后,执行func。有了这样的认识后,我们可以把func等价成:
(function(i){console.log(i)})(i)这个自执行函数。所以这个事情分两步,首先每次循环自执行函数肯定会立即执行一次,会依次输出1,2,3,4。其次,每过time时间,执行一次func,但是在上述代码中,func等价于一个立即执行函数,没有返回值,故什么也不会做。
如果把上述代码改成这样:

for (var i = 0; i < 5; i++) {
  var j=7;
  setTimeout((function(i) {
    console.log(i);
    return function(){
       console.info(j++);
    }
  })(i), i * 1000);
}

上述代码会依次输出0,1,2,3,4, 7,8,9,10,11(结合这个例子理解上一个问题,就容易多了)

如果把上面的代码改成这样呢?

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
}

运行上面的代码会输出5个5(这一点现在可以理解了吧),有人不解的是为什么是每隔一秒输出5而不是隔五秒输出5。setTimeout(func,time)这个函数延迟执行的只是func里面的动作,而time的值是不存在延迟的。上面执行for循环,相当于:setTimeout(func,1000),setTimeout(func,2000) .... 第一次setTimeout执行的时候等了一秒(准确地说,至少要等一秒),第二次setTimeout执行的时候等2秒,但是前面第一次执行的setTimeout函数时,已经等了一秒,所以只需再等一秒就可以立即执行了。在这里,需要弄明白的是,setTimeout函数延迟执行的时间,起点是从time开始赋值的时候计算的,不是从上一个setTimeout函数执行完开始算的。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/81897.html

相关文章

  • Javascript闭包入门(译文)

    摘要:也许最好的理解是闭包总是在进入某个函数的时候被创建,而局部变量是被加入到这个闭包中。在函数内部的函数的内部声明函数是可以的可以获得不止一个层级的闭包。 前言 总括 :这篇文章使用有效的javascript代码向程序员们解释了闭包,大牛和功能型程序员请自行忽略。 译者 :文章写在2006年,可直到翻译的21小时之前作者还在完善这篇文章,在Stackoverflow的How do Java...

    Fourierr 评论0 收藏0
  • JavaScript闭包初探

    摘要:说了半天,究竟什么是闭包呢闭包就是函数的局部变量集合,只是这些局部变量在函数返回后会继续存在。弹出上面函数中的函数就是闭包,就是通过建立函数来访问函数内部的局部变量。闭包会在父函数外部,改变父函数内部变量的值。 JavaScript的闭包 首先声明,这是一篇面向小白的博客,不过也欢迎各位大牛批评指正,谢谢。   其实关于闭包各个论坛社区里都有很多的文章来讲它,毕竟闭包是JavaScri...

    沈建明 评论0 收藏0
  • JavaScript闭包初探

    摘要:说了半天,究竟什么是闭包呢闭包就是函数的局部变量集合,只是这些局部变量在函数返回后会继续存在。弹出上面函数中的函数就是闭包,就是通过建立函数来访问函数内部的局部变量。闭包会在父函数外部,改变父函数内部变量的值。 JavaScript的闭包 首先声明,这是一篇面向小白的博客,不过也欢迎各位大牛批评指正,谢谢。   其实关于闭包各个论坛社区里都有很多的文章来讲它,毕竟闭包是JavaScri...

    canger 评论0 收藏0
  • JavaScript闭包,只学这篇就够了

    摘要:当在中调用匿名函数时,它们用的都是同一个闭包,而且在这个闭包中使用了和的当前值的值为因为循环已经结束,的值为。最好将闭包当作是一个函数的入口创建的,而局部变量是被添加进这个闭包的。 闭包不是魔法 这篇文章使用一些简单的代码例子来解释JavaScript闭包的概念,即使新手也可以轻松参透闭包的含义。 其实只要理解了核心概念,闭包并不是那么的难于理解。但是,网上充斥了太多学术性的文章,对于...

    CoderBear 评论0 收藏0
  • 简单理解JavaScript闭包

    摘要:闭包在我理解是一种比较抽象的东西。所以我写了一篇博文来方便自己理解闭包。那么现在我们可以解释一下闭包的第一个定义在计算机科学中,闭包是引用了自由变量的函数。循环中创建闭包在我们使用的关键字之前,闭包的一个常见问题就出现在循环中创建闭包。 零. 前言 从我开始接触前端时就听说过闭包,但是一直不理解闭包究竟是什么。上网看了各种博客,大家对闭包的说法不一。闭包在我理解是一种比较抽象的东西。所...

    sihai 评论0 收藏0
  • JavaScript闭包

    摘要:闭包引起的内存泄漏总结从理论的角度将由于作用域链的特性中所有函数都是闭包但是从应用的角度来说只有当函数以返回值返回或者当函数以参数形式使用或者当函数中自由变量在函数外被引用时才能成为明确意义上的闭包。 文章同步到github js的闭包概念几乎是任何面试官都会问的问题,最近把闭包这块的概念梳理了一下,记录成以下文章。 什么是闭包 我先列出一些官方及经典书籍等书中给出的概念,这些概念虽然...

    HmyBmny 评论0 收藏0

发表评论

0条评论

lansheng228

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<