深刻理解JavaScript (5) —— 闭包

理解了上下文环境、做用域、做用域链以及自由变量，咱们再来聊聊闭包。

咱们不急于给出闭包的概念，先从应用闭包的两种状况 —— 1.函数做为返回值，2.函数做为参数被传递 —— 来直观的认识它。

第一，函数做为返回值

function fn() {
    var max = 10;
    
    return function bar(x) {
        if( x > max ) {
            console.log(x);
        }
    };
}

var f1 = fn();
f1(15);

如上代码，bar函数做为返回值，赋值给f1变量。执行f1(15)时，用到了fn做用域下的max变量的值。至于如何跨做用域取值，能够参考上一节。

第二，函数做为参数被传递

var max = 10,
    fn = function(x) {
        console.log( x > max ? true : false );
    };

(function(f) {
    var max = 100;
    f(20);
})(fn);

如上代码中，fn函数做为一个参数被传递进入另外一个函数，赋值给f参数。执行f(20)时，max变量的取值是10，而不是100，因此打印结果是true。

上一节讲到自由变量跨做用域取值时，曾经强调过：要去建立这个函数的做用域取值，而不是“父做用域”。理解了这一点，以上两段代码中，自由变量如何取值应该比较简单。

以上是从做用域的角度对闭包的理解，咱们还能够结合执行上下文栈来理解闭包。

在前面讲执行上下文栈时说到，有些状况下，函数调用完成以后，其执行上下文环境不会接着被销毁。这就是须要理解闭包的核心内容。

我们能够拿本文的第一段代码（稍做修改）来分析一下。

第一步，代码执行前(预处理阶段)生成全局上下文环境，并在执行时对其中的变量进行赋值。此时全局上下文环境是活动状态。

图片描述

第二步，执行第17行代码时，调用fn()，产生fn()执行上下文环境，压栈，并设置为活动状态。

第三步，执行完第17行，fn()调用完成。按理说应该销毁掉fn()的执行上下文环境，可是这里不能这么作。注意，重点来了：由于执行fn()时，返回的是一个函数。函数的特别之处在于能够建立一个独立的做用域。而正巧合的是，返回的这个函数体中，还有一个自由变量max要引用fn做用域下的fn()上下文环境中的max。所以，这个max不能被销毁，销毁了以后bar函数中的max就找不到值了。

所以，这里的fn()上下文环境不能被销毁，还依然存在与执行上下文栈中。

——即，执行到第18行时，全局上下文环境将变为活动状态，可是fn()上下文环境依然会在执行上下文栈中。另外，执行完第18行，全局上下文环境中的max被赋值为100。以下图：

第四步，执行到第20行，执行f1(15)，即执行bar(15)，建立bar(15)上下文环境，并将其设置为活动状态。

执行bar(15)时，max是自由变量，须要向建立bar函数的做用域中查找，找到了max的值为10。这个过程在做用域链一节已经讲过。

这里的重点就在于，建立bar函数是在执行fn()时建立的。fn()早就执行结束了，可是fn()执行上下文环境还存在与栈中，所以bar(15)时，max能够查找到。若是fn()上下文环境销毁了，那么max就找不到了。

使用闭包会增长内容开销，如今很明显了吧！

第五步，执行完20行就是上下文环境的销毁过程，这里就再也不赘述了。