JS中的闭包、作用域

1.闭包
在JavaScript中闭包无所不在，你只是必须认出它并接纳它。闭包就是函数能够记住并访问它的词法作用域，即使当这个函数在它的词法作用域之外执行时。

最简单的闭包例子：

function A(){
    function B(){
       console.log('Hello Closure!');
    }
    returnB;
}
varC = A();
C();// Hello Closure!

我们简单分析一下它和普通函数有什么不同，上面代码翻译成自然语言如下：

• 定义普通函数 A
• 在 A 中定义普通函数 B
• 在 A 中返回 B
• 执行 A，并把 A 的返回结果赋值给变量 C
• 执行 C
  把这5步操作总结成一句话就是：函数A的内部函数B被函数A外的一个变量 c 引用。
  把这句话再加工一下就变成了闭包的定义：
  当一个内部函数被其外部函数之外的变量引用时，就形成了一个闭包。因此，当你执行上述5步操作时，就已经定义了一个闭包！

下面我们看一个经典的闭包的例子：

for (var i=1; i<10; i++) {
    setTimeout( function timer(){
     console.log( i );
     },1000 );
 }

由于setTimeout是异步的，那么在真正的1000ms结束前，其实10次循环都已经结束了。我们可以将代码分成两部分分成两部分，一部分处理i++,另一部分处理setTimeout函数。那么上面的代码等同于下面的：

// 第一个部分
     i++;
     ... 
     i++; // 总共做10次
  
     // 第二个部分
     setTimeout(function() {
        console.log(i);
     }, 1000);
    ...
    setTimeout(function() {
       console.log(i);
    }, 1000); // 总共做10次

因为setTimeout中的匿名function没有将 i 作为参数传入来固定这个变量的值, 让其保留下来, 而是直接引用了外部作用域中的 i, 因此 i 变化时, 也影响到了匿名function。其实要让它运行的跟我们料想的一样很简单，只需要将setTimeout函数定义在一个单独的作用域里并将i传进来即可。如下：

for (var i=1; i<10; i++) {
     (function(){
      var j = i;
      setTimeout( function timer(){
           console.log( j );
      }, 1000 );
     })();
 }

再看一个实现方案：

 for (var i=1; i<10; i++) {
     (function(j){
         setTimeout( function timer(){
             console.log( j );
         }, 1000 );
     })( i );
 }

2.作用域

2.1概念

作用域，也就是我们常说的词法作用域，说简单点就是你的程序存放变量、变量值和函数的地方。

• 块级作用域
  如果你接触过块级作用域，那么你应该非常熟悉块级作用域。简单说来就是，花括号{}括起来的代码共享一块作用域，里面的变量都对内或者内部级联的块级作用域可见。
• 基于函数的作用域
  在JavaScript中，作用域是基于函数来界定的。也就是说属于一个函数内部的代码，函数内部以及内部嵌套的代码都可以访问函数的变量。如下：
  
  上面定义了一个函数foo，里面嵌套了函数bar。图中三个不同的颜色，对应三个不同的作用域。①对应着全局scope，这里只有foo②是foo界定的作用域，包含、b、bar③是bar界定的作用域，这里只有c这个变量。在查询变量并作操作的时候，变量是从当前向外查询的。就上图来说，就是③用到了a会依次查询③、②、①。由于在②里查到了a，因此不会继续查①了。

2.2 块级作用域

严格的说，在JavaScript也存在块级作用域。如下面几种情况：
①with

 var obj = {a: 2, b: 2, c: 2};
 with (obj) { //均作用于obj上
      a = 5;
      b = 5;
      c = 5;  
 }

②let
let是ES6新增的定义变量的方法，其定义的变量仅存在于最近的{}之内。如下：

var foo = true;
if (foo) {
    let bar = foo * 2;
    bar = something( bar );
    console.log( bar );
}
console.log( bar ); // ReferenceError

③const
与let一样，唯一不同的是const定义的变量值不能修改。如下：

var foo = true;
if (foo) {
    var a = 2;
    const b = 3; //仅存在于if的{}内
    a = 3;
    b = 4; // 出错，值不能修改
}
console.log( a ); // 3
console.log( b ); // ReferenceError!

2.3 作用域如何确定

无论函数是在哪里调用，也无论函数是如何调用的，其确定的词法作用域永远都是在函数被声明的时候确定下来的。作用域是在函数定义时就确定的,而非调用时确定。理解这一点非常重要。

总结：
这是对闭包最简单的理解，当然闭包还有其更深层次的理解，这个就涉及的多了，你需要了解JS的执行环境(execution context)、活动对象(activation object)以及作用域(scope)和作用域链(scope chain)的运行机制。但作为初学者，暂时不必了解这些，有了简单的理解之后，一定要在实际项目中用起来，等你用的多了，对于闭包，你自然会有更深层次的理解！