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

jiezi

5 年前

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

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

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

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

文章首发地址于 sau 交流学习社区：https://www.mwcxs.top/page/57…

举个栗子：

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/mqyqingfen…

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

一、概要

二、分析

三、概念

四、面试必刷的题

五、思考题

六、参考