javascript深入理解-从作用域链理解闭包

一、概要

红宝书（P178）对于闭包的定义：闭包就是有权访问另外一个函数作用域中变量的函数。

MDN，对于闭包的定义：闭包就是指能够访问自由变量的函数。

那么什么是自由变量？自由变量就是在函数中使用，但既不是函数参数arguments，也不是函数的局部变量的变量，就是说另外一个函数作用域中的变量。

文章首发地址：https://www.mwcxs.top/page/573.html

闭包组成？闭包 = 函数 + 函数能够访问的变量

二、分析

举个栗子：

var a = 1;

function foo() {
    console.log(a);
}

foo();

foo函数可以访问到变量a，但是a并不是foo函数的局部变量，也不是foo函数的参数，所以a就是自由变量，那么函数foo+foo函数可以访问自由变量a不就是构成了一个闭包嘛。

我们再来看一个栗子：

function getOuter(){
  var date = '1127';
  function getDate(str){
    console.log(str + date);  //访问外部的date
  }
  return getDate('今天是：'); //"今天是：1127"
}
getOuter();

其中date不是函数getDate的参数，也不是局部变量，所以date是自由变量。

总结起来就是两点：

1、是一个函数（比如：内部函数从父函数中返回）

2、能够访问上级函数作用域中的变量（哪怕上级函数的上下文已经销毁）

然后我们再来看一个栗子（来自《JavaScript权威指南》）来分析：

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}

var foo = checkscope(); // foo指向函数f
foo();	

这时候需要我们来分析一下这段代码中执行上下文栈和执行上下文的变化情况。

简要的分析一下执行过程：

1、进入全局代码，创建全局执行上下文，全局执行上下文压入执行上下文栈；

2、全局执行上下文初始化；

3、执行checkscope函数，创建sheckscope函数执行上下文，checkscope执行上下文被压入执行上下文栈；

4、checkscope执行上下文初始化，创建变量对象，作用域链，this等；

5、checkscope函数执行完毕，checkscope执行上下文从执行上下文栈中弹出；

6、执行f函数，创建f函数执行上下文，f执行上下文压入执行上下文栈；

7、f执行上下文初始化，创建变量对象，作用域链，this等；

8、f函数执行完毕，f函数上下文从执行上下文栈中弹出

那么问题来了，函数f执行的时候，checkscope函数上下文已经被销毁了，那函数f是如何取到scope变量的？

答：函数f执行上下文维护了一盒作用域链，作用域链会指向checkscope作用域，作用域链是一个数组，结构如下：

fContext = {
    Scope: [AO, checkscopeContext.AO, globalContext.VO],
}

所以指向关系：当前作用域-->checkscope作用域-->全局作用域，即使checkscopeContext被销毁了，但是js依然会让checkscopeContext.AO（活动对象）继续存在内存中，f函数依然可以通过f函数的作用域链找到它，这就是闭包的关键。

注：AO 表示活动对象，储存了函数的参数、函数内声明的变量等

三、概念

上面分析介绍的是闭包的实践角度，其实闭包有很多种介绍，说法不一。

汤姆大叔在关于闭包对的文章的定义。ECMAScript中，闭包指的是：

1、从理论角度：所有的函数，因为它们都是创建的时候就将上层上下文的数据保存起来了。哪怕是简单的全局变量也是如此，因为函数中访问全局变量就是相当于再访问自由变量，这个时候使用最外层的作用域。

2、从实践角度：以下函数才算闭包：

（1）即使创建它的上下文已经摧毁了，它依然存在（比如，内部函数中返回）

（2）在代码中引用了自由变量

四、面试必刷的题

var data = [];

for (var i = 0; i < 3; i++) {
  data[i] = function () {
    console.log(i);
  };
}

data[0]();
data[1]();
data[2]();

如果知道是闭包，答案很明显，都是3。

循环结束后，全局执行上下文的VO是

globalContext = {
    VO: {
        data: [...],
        i: 3
    }
}

执行data[0]函数的时候，data[0]函数的作用域链为：

data[0]Context = {
    Scope: [AO, globalContext.VO]
}

由于其自身没有i变量，就会向上查找，所有从全局上下文查找到i为3，data[1] 和 data[2] 是一样的。

注：

1、for 循环不会创建一个执行上下文，所有不会有 AO， i 的值是在全局对象的 AO 中，代码初始的时候为：

globalContext = {
    VO: {
        data: [...],
        i: 0
    }
}

2、data[0] 是一个函数名，data[0]() 表示执行这个函数，当执行函数的时候，循环已经走完了；

3、函数能够读取到的值跟函数定义的位置有关，跟执行的位置无关。

解决办法：

改成闭包，方法就是data[i]返回一个函数，并且访问变量i

var data = [];

for (var i = 0; i < 3; i++) {
  data[i] = (function (i) {
      return function(){
          console.log(i);
      }
  })(i);
}

data[0]();	// 0
data[1]();	// 1
data[2]();	// 2

循环结束后的全局执行上下文没有变化。

执行 data[0] 函数的时候，data[0] 函数的作用域链发生了改变：

data[0]Context = {
    Scope: [AO, 匿名函数Context.AO, globalContext.VO]
}

匿名函数执行上下文的AO为：

匿名函数Context = {
    AO: {
        arguments: {
            0: 0,
            length: 1
        },
        i: 0
    }
}

data[0]Context 的 AO 并没有 i 值，所以会沿着作用域链从匿名函数 Context.AO 中查找，这时候就会找 i 为 0，找到了就不会往 globalContext.VO 中查找了，即使 globalContext.VO 也有 i 的值(值为3)，所以打印的结果就是0

五、思考题

把for循环中的var i = 0，改成let i = 0。结果是什么，为什么？

var data = [];

for (let i = 0; i < 3; i++) {
  data[i] = function () {
    console.log(i);
  };
}

data[0]();
data[1]();
data[2]();

或者这样：

var data = [];

var _loop = function _loop(i) {
    data[i] = function () {
        console.log(i);
    };
};

for (var i = 0; i < 3; i++) {
    _loop(i);
}

data[0]();
data[1]();
data[2]();

六、参考

https://github.com/mqyqingfeng/Blog/issues/9