美文网首页
2018-09-12 对阮一峰大佬《学习Javascript闭包

2018-09-12 对阮一峰大佬《学习Javascript闭包

作者: isaaCyu | 来源:发表于2018-09-17 22:26 被阅读69次

    阮一峰大佬的文章

    • 1. 什么是闭包?

      我的理解是,闭包就是能够读取其他函数内部变量的函数。
      由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可
      以把闭包简单理解成"定义在一个函数内部的函数"。

    • 2. 闭包的用途

      • 可以读取函数内部的变量

        简单来说JS语言具备的特点之一,即子函数可以获取全局变量,而函数外部无法获取到函数内的局部变量,在某些特定的情况下我们需要获取函数内部的局部变量即可通过一些变通的方法达成目的。

         function f1(){
              var n=999;
            function f2(){ 
              alert(n); // 999
            }
          }
        

        Javascript语言特有的"链式作用域"结构(chain scope),子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。

        因此利用JS语言的此种特性,
        在目标函数内部定义一个函数就可以目标函数的局部变量暴露出来

      • 让这些变量的值始终保持在内存中

        还是上大佬的栗子

        function f1(){
          var n=999;
          nAdd=function(){n+=1}
          function f2(){
              alert(n);
          }
          return f2;
        }
        var result=f1();
        result(); // 999
        nAdd();
        result(); // 1000
        

        在这段代码中,result实际上就是闭包f2函数。它一共运行了两次,第一次的值是999,第二次的值是1000。这证明了,函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除。
        为什么会这样呢?原因就在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。
        这段代码中另一个值得注意的地方,就是"nAdd=function(){n+=1}"这一行,首先在nAdd前面没有使用var关键字,因此nAdd是一个全局变量,而不是局部变量。其次,nAdd的值是一个匿名函数(anonymous function),而这个匿名函数本身也是一个闭包,所以nAdd相当于是一个setter,可以在函数外部对函数内部的局部变量进行操作。

    • 3. 使用闭包需要注意的点

      1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

      2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

    • 4. 阮一峰大佬的思考题 1

    题目


    image.png

    最终输出结果是The Window

    下面强行分析一波

    alert输出 object对象的 getNameFunc()函数,此时getNameFunc()函数的函数定义为

        function(){
            return this.name;
        };
    

    同时getNameFunc()函数的调用上下文应当为全局 windows,因此当函数再找不到this.name定义的时候会向上,也就是当前调用上下文也就是windows寻找,于是发现 name是有定义的,所以第一个思考题输出结果为The Windows

    • 5. 阮一峰大佬的思考题 2

    题目


    image.png

    这一道题在函数getNameFunc()内部有一句

        var that = this;
    

    我们都知道this的指向取决于调用上下文 而不是他所在的代码块,因此此时的this实际指向的应当是object对象,所以当函数在寻找that.name定义的时候,会找到他的调用上下文object
    因此这道题会输出 My Object

    相关文章

      网友评论

          本文标题:2018-09-12 对阮一峰大佬《学习Javascript闭包

          本文链接:https://www.haomeiwen.com/subject/dmwmgftx.html