JavaScript深切系列第八篇，引见理论上的闭包和实践上的闭包，以及从作用域链的角度剖析典范的闭包题。
定义
MDN 对闭包的定义为：
闭包是指那些能够接见自在变量的函数。
那什么是自在变量呢？
自在变量是指在函数中运用的，但既不是函数参数也不是函数的局部变量的变量。
由此，我们能够看出闭包共有两部分构成：
闭包 = 函数 + 函数能够接见的自在变量
举个例子：
var a = 1;
function foo() {
console.log(a);
}
foo();foo 函数能够接见变量 a，然则 a 既不是 foo 函数的局部变量，也不是 foo 函数的参数，所以 a 就是自在变量。
那末，函数 foo + foo 函数接见的自在变量 a 不就是构成了一个闭包嘛……
还真是如许的！
所以在《JavaScript威望指南》中就讲到：从手艺的角度讲，一切的JavaScript函数都是闭包。
咦，这怎样跟我们日常平凡看到的讲到的闭包不一样呢！？
别着急，这是理论上的闭包，实在另有一个实践角度上的闭包，让我们看看汤姆大叔翻译的关于闭包的文章中的定义：
ECMAScript中，闭包指的是：
从理论角度：一切的函数。由于它们都在建立的时刻就将上层上下文的数据保存起来了。哪怕是简朴的全局变量也是云云，由于函数中接见全局变量就相称因而在接见自在变量，这个时刻运用最外层的作用域。
从实践角度：以下函数才算是闭包：
纵然建立它的上下文已烧毁，它依旧存在（比方，内部函数从父函数中返回）
在代码中引用了自在变量
接下来就来讲讲实践上的闭包。
剖析
让我们先写个例子，例子依旧是来自《JavaScript威望指南》，轻微做点修改：
var scope = "global scope";
function checkscope(){
var scope = "local scope";
function f(){
return scope;
}
return f;
}
var foo = checkscope();
foo();起首我们要剖析一下这段代码中实行上下文栈和实行上下文的变化状况。
另一个与这段代码类似的例子，在《JavaScript深切之实行上下文》中有着异常细致的剖析。假如看不懂以下的实行历程，发起先浏览这篇文章。
这里直接给出扼要的实行历程：
进入全局代码，建立全局实行上下文，全局实行上下文压入实行上下文栈
全局实行上下文初始化
实行 checkscope 函数，建立 checkscope 函数实行上下文，checkscope 实行上下文被压入实行上下文栈
checkscope 实行上下文初始化，建立变量对象、作用域链、this等
checkscope 函数实行终了，checkscope 实行上下文从实行上下文栈中弹出
实行 f 函数，建立 f 函数实行上下文，f 实行上下文被压入实行上下文栈
f 实行上下文初始化，建立变量对象、作用域链、this等
f 函数实行终了，f 函数上下文从实行上下文栈中弹出
相识到这个历程，我们应当思索一个题目，那就是：
当 f 函数实行的时刻，checkscope 函数上下文已被烧毁了啊(即从实行上下文栈中被弹出)，怎样还会读取到 checkscope 作用域下的 scope 值呢？
以上的代码，如果转换成 PHP，就会报错，由于在 PHP 中，f 函数只能读取到本身作用域和全局作用域里的值，所以读不到 checkscope 下的 scope 值。(这段我问的PHP同事……)
但是 JavaScript 倒是能够的！
当我们相识了详细的实行历程后，我们晓得 f 实行上下文保护了一个作用域链：
fContext = {
Scope: [AO, checkscopeContext.AO, globalContext.VO],
}对的，就是由于这个作用域链，f 函数依旧能够读取到 checkscopeContext.AO 的值，申明当 f 函数引用了 checkscopeContext.AO 中的值的时刻，纵然 checkscopeContext 被烧毁了，然则 JavaScript 依旧会让 checkscopeContext.AO 活在内存中，f 函数依旧能够经由过程 f 函数的作用域链找到它，恰是由于 JavaScript 做到了这一点，从而完成了闭包这个观点。
所以，让我们再看一遍实践角度上闭包的定义：
纵然建立它的上下文已烧毁，它依旧存在（比方，内部函数从父函数中返回）
在代码中引用了自在变量
在这里再补充一个《JavaScript威望指南》英文原版对闭包的定义:
This combination of a function object and a scope (a set of variable bindings) in which the function’s variables are resolved is called a closure in the computer science literature.
闭包在计算机科学中也只是一个一般的观点，人人不要去想得太庞杂。
必刷题
接下来，看这道刷题必刷，口试必考的闭包题：
var data = [];
for (var i = 0; i < 3; i++) {
data[i] = function () {
console.log(i);
};
}
data[0]();
data[1]();
data[2]();答案是都是 3，让我们剖析一下缘由：
当实行到 data[0] 函数之前，此时全局上下文的 VO 为：
globalContext = {
VO: {
data: [...],
i: 3
}
}当实行 data[0] 函数的时刻，data[0] 函数的作用域链为：
data[0]Context = {
Scope: [AO, globalContext.VO]
}data[0]Context 的 AO 并没有 i 值，所以会从 globalContext.VO 中查找，i 为 3，所以打印的效果就是 3。
data[1] 和 data[2] 是一样的原理。
所以让我们改成闭包看看：
var data = [];
for (var i = 0; i < 3; i++) {
data[i] = (function (i) {
return function(){
console.log(i);
}
})(i);
}
data[0]();
data[1]();
data[2]();当实行到 data[0] 函数之前，此时全局上下文的 VO 为：
globalContext = {
VO: {
data: [...],
i: 3
}
}跟没改之前如出一辙。
当实行 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。
data[1] 和 data[2] 是一样的原理。
下一篇文章
相干链接
假如想相识实行上下文的详细变化，无妨循规蹈矩，浏览这六篇：
《JavaScript深切之从ECMAScript范例解读this》
深切系列
JavaScript深切系列目次地点：https://github.com/mqyqingfeng/Blog。
JavaScript深切系列估计写十五篇摆布，旨在帮人人捋顺JavaScript底层学问，重点解说如原型、作用域、实行上下文、变量对象、this、闭包、按值通报、call、apply、bind、new、继续等难点观点。
假如有毛病或许不严谨的处所，请务必赋予斧正，非常谢谢。假如喜好或许有所启示，迎接star，对作者也是一种勉励。
