JavaScript 闭包详解

闭包（Closure）是前端开发者常常会听到的一个概念，也是咱们在求职面试中常常会遇到的题目之一。透过表象去理解闭包的本质，对前端开发者来讲是进阶的必经之路。

闭包跟执行上下文中的变量对象和做用域链有着千丝万缕的关系，深入理解变量对象以及做用域链对理解闭包的本质有很大的帮助。

MDN 中对闭包的定义是：闭包是函数和声明该函数的词法环境的组合。

我认为 MDN 中对闭包的定义比较抽象以至并不能让咱们很清楚地知道闭包是什么东西。在这里我直接给闭包作一个我认为比较本质且好理解（前提固然是你对执行上下文系列已经有相应的了解啦）的定义：闭包是指其所在执行上下文已经出栈，但仍访问了其所在执行上下文变量对象的函数。

咱们常常问，闭包是什么？其实从上述的定义咱们能够很简单地知道，闭包是一个函数。但跟普通的函数不同，闭包是具备特殊能力的函数。

从上述的定义咱们能够知道，闭包具备两个特色，即

• 其所在执行上下文已经出栈
• 访问了其所在执行上下文变量对象

这里须要注意的是，「其所在执行上下文」指的是闭包所在函数对应的执行上下文，而不是指闭包自己所对应的执行上下文。

一个简单的可以产生闭包的例子是，在函数 A 中建立了函数 B 而且返回函数 B，当函数 B 执行时，若是访问了 A 中的变量，则产生了闭包。

//一个简单的产生闭包的例子
function A(){
    var a = 2;
    function B(){
        console.log(a)
    }

    return B;
}

A()();  // 2
复制代码

在大部分书中，对闭包的概念解释为：可以读取其它函数内部变量的函数。在上述的简单例子中，即以函数 B 指代闭包，在咱们平时开发过程当中，也常常会以函数 B 来指代闭包。而在 Chrome 的开发者工具中，则会以函数 A 指代闭包。

那么，闭包的本质又是什么呢？

咱们都知道，JavaScript 拥有自动的垃圾回收机制，当一个值失去引用的时候，垃圾回收机制会根据特殊的算法找到它并将其回收。

函数的执行上下文在出栈后，其变量对象会失去引用等待被回收，而闭包的存在会阻止这一过程，由于闭包的做用域链包含了其所在执行上下文的变量对象。

举个例子来讲明其中的过程，假设有一个 JavaScript 文件中包含以下代码

var a = 1;
function fn1(){
    var b = 2;
    function fn2(){
        return b;
    }
    
    return fn2;
}

var fn2=fn1();
fn2();
复制代码

在代码执行过程当中，执行上下文栈的行为以下

/*伪代码*/
// 代码执行时最早进入全局环境，全局上下文被建立并入栈
ECStack.push(globalContext);
// fn1 被调用，fn1 函数上下文被建立并入栈
ECStack.push(<fn1> functionContext);
// fn1 执行完毕，fn1 函数上下文出栈
ECStack.pop();
// fn2 被调用，fn2 函数上下文被建立并入栈
ECStack.push(<fn2> functionContext);
// fn2 执行完毕，fn2 函数上下文出栈
ECStack.pop();
// 代码执行完毕，全局上下文出栈
ECStack.pop();
复制代码

从执行上下文栈的行为咱们可知，在 fn2 函数执行的时候，其实 fn1 上下文已经出栈了，按照 javascript 的垃圾回收机制，fn1 上下文的变量对象失去引用后会被垃圾回收机制回收，但因为在 fn2 上下文的做用域链包含了 fn1 上下文的变量对象，因此 fn1 上下文的变量对象不会被垃圾回收机制回收。

我在以前的文章说过，函数做用域是在函数被定义（声明）的时候肯定的。每个函数都会包含一个 [[scope]] 内部属性，在函数被定义的时候，该函数的 [[scope]] 属性会保存其上层上下文的变量对象，造成包含上层上下文变量对象的层级链。

从代码中可知，在 fn2 函数被定义的时候，其上层上下文包括了 fn1 上下文和全局上下文

fn2.[[scope]]=[fn1Context.VO,globalContext.VO]
复制代码

当 fn2 被调用的时候，其执行上下文被建立并入栈，此时会生成变量对象并将该变量对象添加进做用域链的顶端，而且将 [[scope]] 添加进做用域链

fn2Context.Scope=[fn2Context.VO].concat([[scope]])
=>
fn2Context.Scope=[fn2Context.VO,fn1Context.VO,globalContext.VO]
即
fn2Context={
    scope:[fn2Context.VO,fn1Context.VO,globalContext.VO]
}
复制代码

可见，fn2 上下文的做用域链中包含了 fn1 上下文的变量对象，而且因为 fn2 访问了 fn1 中的变量，因此阻止了 fn1 上下文的变量对象被垃圾回收机制回收。

让咱们来看一个面试题常常会遇到的一个关于闭包的很经典的题目～

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

arr[0]();
arr[1]();
arr[2]();
复制代码

求出上面代码三个函数的输入结果。

若是对前面执行上下文系列文章已经理解透彻的童鞋，应该可以很容易得出，三个函数都是输出 3 。让咱们来分析一波～

在 arr[0] 函数执行以前，咱们能够知道，全局上下文的变量对象以下所示

globalContext = {
    VO: {
        arr: [...],
        i: 3
    }
}
复制代码

在 arr[0] 被调用执行时，其做用域链在函数上下文的建立阶段被建立，其做用域链以下

arr[0]Context = {
    Scope: [arr[0]Context.VO, globalContext.VO]
}
复制代码

根据做用域链，arr[0] 函数会如今自身的变量对象中寻找 i ，若是找不到，会到全局上下文变量对象中寻找 i，因此最终输出 3 。

arr[1]、arr[2] 的分析与上述一致。

那么怎么使上述三个函数的输出结果是 0 1 2 呢？

一个经典的解决方式是经过闭包来实现，代码以下

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

arr[0]();  //  0
arr[1]();  //  1
arr[2]();  //  2
复制代码

一样地，在 arr[0] 函数执行前，全局上下文的变量对象跟以前同样没有任何变化。

而在 arr[0] 被调用执行时，其做用域链在函数上下文的建立阶段被建立，其做用域链以下

arr[0]Context = {
    Scope: [arr[0]Context.VO, 匿名函数Context.VO, globalContext.VO]
}
复制代码

能够看到其做用域链发生了变化，arr[0] 的变量对象以后紧跟着匿名函数的变量对象

匿名函数Context = {
    VO: {
        Arguments:{
            0:0,
            length:1
        },
        i: 0
    }
}
复制代码

在匿名函数的变量对象中，能找到访问的变量 i，因此获得 i 值为 0.

arr[1]、arr[2] 的分析与上述一致，获得的 i 值分别为 一、2 。

经过闭包，咱们可以访问其它函数上下文的变量对象。

在实践中，闭包的应用场景不少，但其都是依据闭包可以访问其它函数上下文的变量对象的特性。

闭包可以被应用在模块化中：

;(function(){
    var a=1;
    var addOne=function(x){
        return x+a;
    }
    window.addOne=addOne;
})()

console.log(addOne(2));  // 3
复制代码

如上是经过函数自执行以及闭包实现模块化的一个例子，经过将函数添加到全局对象的方式将方法（这里是闭包）暴露出来，addOne 闭包访问了自执行函数中的变量 a 。

闭包可以被应用在柯里化中：

柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。

柯里化的实现方式一样用到了闭包，在这边文章中不作多余的赘述，感兴趣的童鞋能够查阅柯里化的资料。

闭包的应用场景多种多样，咱们能够经过闭包实现许多不一样的功能。闭包的魅力，须要咱们去理解其本质，并在实践中灵活地应用它。

闭包的征途，是星辰大海。

以为还不错的小伙伴，能够关注一波公众号哦。