2018-01-07 关于javascript闭包和作用域的理解

关于 javascript 闭包的一些思考

什么是作用域?

  • 作用域
    • 众所周知 在javascript 作用域就是限制我们执行代码的一个范围,或者说是框架。
    • 首先来谈谈js的编译原理,其中不可避免的就要提到 引擎、编译器、作用域
      • 引擎:负责整个 JavaScript 程序的编译及执行过程
      • 编译器:负责语法分析及代码生成
      • 作用域: 负责收集并维护由所有声明的标识符(变量)组成的一系列查 询,并实施一套非常严格的规则,确定当前执行的代码对这些标识符的访问权限
    • 这次我们的主角是==作用域==
    • 下面我们来看一个简单的赋值操作:

      var a = 2;
      
      • 然后他们三个都干了什么啦?
        • 变量的赋值操作会执行两个动作,首先编译器会在当前作用域中声明一个变量(如 果之前没有声明过),然后在运行时引擎会在作用域中查找该变量,如果能够找到就会对 它赋值。
    • 当然我们不必深究他们到底干了什么,我们要深入探究 作用域到底是什么?

什么是词法作用域?

  • 词法作用域
    • 我们来先看看一段代码

      function foo(a) { 
          var b = a * 2;
          function bar(c) { 
              console.log( a, b, c );
          }
          bar( b * 3 ); 
          
      }
      foo( 2 ); // 2, 4, 12
      
      • 1 包含着整个全局作用域,其中只有一个标识符:foo。

      • 2 包含着 foo 所创建的作用域,其中有三个标识符:a、bar 和 b。

      • 3 包含着 bar 所创建的作用域,其中只有一个标识符:c。

    • 上面描述的就是作用域的作用,每个标识符都对应着相应的。我们==把作用域看做一个气泡==

什么是函数作用域?

  • 函数作用域
    • 如同上面的词法作用域那样,在 javascript 中当我们创建一个函数的时候都会创建一个新的作用域。
    function foo(a){
        var b = 2;
        
        //一些代码
        function bar(){
            // ...
        }
        
        // 更多的代码
        
        var a = 3;
    }
    
    
    • 在这个代码片段中,==foo(..) 的作用域气泡中包含了标识符 a、b、c 和 bar==。无论标识符 声明出现在作用域中的何处,这个标识符所代表的变量或函数都将附属于所处作用域的气泡。

什么是块作用域?

  • 块作用域
    • 除 JavaScript 外的很多编程语言都支持块作用域,因此其他语言的开发者对于相关的思维 方式会很熟悉,但是对于主要使用 JavaScript 的开发者来说,这个概念会很陌生。
      • 看下面的代码
      for (var i=0; i<10; i++) { 
          console.log(i)
      }
      
      • 我们在for的头部定义了变量 i ,而且我们只想在for循环中使用 i ,而忽略了在 javascript 中 i 会绑定在全局变量(外部作用域)中。
      • 在 ES6 中我们推荐使用 let 来避免 i收到全局变量的污染

        for(let i = 0;i < 10; i++ ){
            console.log(i);
        }
        

什么是垃圾回收机制

  • 垃圾回收机制
    • JavaScript 垃圾回收的机制很简单:找出==不再使用的变量==,然后释放掉其占用的内存,但是这个过程不是时时的,因为其开销比较大,所以垃圾回收器会按照固定的时间间隔周期性的执行。
    • 那什么是==不再使用的变量==啦?
      • 我们知道js中的全局变量,和局部变量。全局变量在浏览器页面卸载的时候才会回收。而局部变量在函数生命周期结束的时候浏览器为了节约内存空间,就需要回收这一变量。
    • 一种回收方法-标记清除(mark and sweep)
      • 这是JavaScript最常见的垃圾回收方式,当变量进入执行环境的时候,比如函数中声明一个变量,垃圾回收器将其标记为“进入环境”,当变量离开环境的时候(函数执行结束)将其标记为“离开环境”。
    • 还有其他的回收的方法就不多多探究了。

什么是闭包?

  • 闭包的理解
    • 作用域闭包

      • 参考阮一峰大神的文章,代码中的f2函数,就是闭包。
      function f1(){
         var n = 999;
         function f2(){
             alert(n);
         }
         return f2;
      }
      
      var result = f1();
      result();//999
      
      • 闭包就是能够读取其他函数内部变量的函数。

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

      • 所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。

    • 闭包的用途

      • 一个是前面提到的可以读取函数内部的变量
      • 另一个就是让这些变量的值始终保持在内存中。
      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)回收。

参考:

你不知道的javascript(上)

学习Javascript闭包(Closure)

推荐阅读更多精彩内容