关于 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）