javascript深刻理解-从做用域链理解闭包

1、概要

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

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

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

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

闭包组成？闭包 = 函数 + 函数可以访问的变量

 

2、分析

举个栗子：

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是自由变量。

总结起来就是两点：

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

二、可以访问上级函数做用域中的变量（哪怕上级函数的上下文已经销毁）

 

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

var scope = "global scope"; function checkscope(){ var scope = "local scope"; function f(){ return scope; } return f; } var foo = checkscope(); // foo指向函数f foo(); 

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

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

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

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

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

四、checkscope执行上下文初始化，建立变量对象，做用域链，this等；

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

六、执行f函数，建立f函数执行上下文，f执行上下文压入执行上下文栈；

七、f执行上下文初始化，建立变量对象，做用域链，this等；

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

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

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

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

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

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

 

 

3、概念

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

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

一、从理论角度：全部的函数，由于它们都是建立的时候就将上层上下文的数据保存起来了。哪怕是简单的全局变量也是如此，由于函数中访问全局变量就是至关于再访问自由变量，这个时候使用最外层的做用域。

二、从实践角度：如下函数才算闭包：

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

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

 

4、面试必刷的题

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] 是同样的。

注：

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

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

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

三、函数可以读取到的值跟函数定义的位置有关，跟执行的位置无关。

 

解决办法：

改为闭包，方法就是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

 

5、思考题

把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]();

 

6、参考

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