不积跬步之我们谈闭包的时候在谈什么？

当我们谈到闭包的时候，我们在谈什么呢？我们会想闭包是什么？闭包会有什么副作用呢？它是用来解决什么问题的呢？带着这些问题，我们去学习一下它吧。

什么是闭包呢？

闭包是指有权访问另一个函数作用域中的变量的函数。而创建闭包的常见方式，就是在一个函数的内部创建另一个函数。

例如下面的代码：

function createComparisonFunction(propertyName){
    return function (object1,object2){
        var value1 = object1[propertyName];//这两行代码
        var value2 = object2[propertyName];//这两行代码
        
        if(value1 < value2){
            return -1;
        }else if(value1 > value2){
            return 1;
        }else{
            return 0;
        }
    }
}

在上面的例子中，被注释的那两行代码是内部函数(匿名函数)中的代码，这两行代码访问了外部函数中的变量propertyName即使这个内部函数被返回了，而且是在其他的地方调用了，但是它仍然可以访问变量propertyName。之所以能够访问这个变量，就是因为内部函数的作用域链中包含了外部函数createComparisonFunction的作用域。而我们如果想要搞清楚为什么会这样，就必须理解函数被调用的时候都发生了来入手。而要理解函数被调用的时候发生了什么，我们就要知道执行环境和作用域链。

执行环境和作用域链

执行环境定义了变量和函数有权访问的其他的数据，决定了他们各自的行为。每一个执行环境都有一个与之关联的变量对象，环境中定义的所有变量和函数都保存在这个对象中。

而全局执行环境就是最外围的一个执行环境。

每个函数都有自己的执行环境。当执行流进入一个函数时，函数的环境就会进去一个环境栈中。而在函数执行之后，栈将其环境弹出，将控制权返回之前的执行环境。

执行环境就是调用栈的栈帧。

我们看一下下面的例子深入理解一下：

var color = "blue";
function changeColor(){
    var anotherColor = "red";
    function swapColors(){
        var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;
        //这里可以访问color,anotherColor和tempColor
    }
    //这里可以访问color,anotherColor，但是不能访问tempColor
    swapColors();
}
//这里只能访问color
changeColor()；

上面的例子中，我们其实有三个执行环境：全局执行环境，包含了变量color和函数changeColor；changeColor函数的执行环境，它里面包含了变量anotherColor和函数swapColors，但是它可以访问外部的color。swapColor执行环境，它包含了变量tempColor，但是它可以访问外面的两个变量anotherColor,color.

他们的作用域也是逐级向上搜索，内部函数继承外部函数的作用域链，当我们访问color变量的时候会先从当前作用域中查找，如果没有，就去外面的找，如果还没有就去全局环境中找，知道找到为止，如果找不到就会报错。

下面的简图可以更加直观的看出来。

window
|
|----color
|
|----changeColor()
        |
        |----anotherColor
        |
        |----swapColor()
            |
            |----tempColor

每一个执行环境都可以向上搜索作用域链，以查询变量和函数名；但任何环境都不能通过向下搜索作用而进入另一个执行环境。

当函数被调用时，会创建一个执行环境及相应的作用域链(execution context)。然后使用arguments和其他命名参数的值来初始化函数的活动对象(activation object)。但在作用域链中，当前函数的活动对象是第一位,外部函数活动对象始终处于第二位，外部函数的外部函数是第三位，直到最后的全局执行环境。

当我们在函数中访问一个变量时，就会从作用域链中搜索具有相应名字的变量。一般来讲，当函数执行完毕后，局部活动对象就会被销毁，而内存中只保存的全局作用域。

但是闭包的情况却不一样。

在另一个函数内部定义的函数会将包含外部函数的活动对象添加到它的作用域链中。

因此我们在最开始的例子中，createComparisonFunction()函数内部定义的匿名函数的作用域链中，包含了外部函数createComparisonFunction()的活动对象。也就是包含了，arguments,propertyName等。

所以这个匿名函数在被返回以后，同样可以调用访问外部函数中的变量。

var compare = createComparisonFunction("name");
var result = compare({name:"zhangsan"},{name:"lisi"});

在匿名函数从createComparisonFunction()返回后，它的作用域链初始化为包含createComparisonFunction()函数的活动对象和全局变量对象。这样匿名函数就可以访问createComparisonFunction()函数中定义的所有变量，如它的参数变量propertyName。而且更加重要的是：
createComparisonFunction()函数执行完毕后，它的活动对象并不会被销毁，因为匿名函数的作用域链仍然引用的这个活动对象。也就是说，当createComparisonFunction()函数执行完毕后，其执行环境的作用域链会被销毁，但是它的活动对象不会，仍然存在于内存中，知道匿名函数被销毁后，createComparisonFunction的活动对象才会被销毁，这也是闭包容器出现内存泄露的原因。

那么我们应该怎么避免这种情况呢？就是即使的把它置空就可以了

//创建函数
var compare = createComparisonFunction("name");
//调用函数
var result = compare({name:"zhangsan"},{name:"lisi"});
//解除匿名函数的引用，
compare = null;

当我们把匿名函数引用交给compare以后，只要把compare = null;就可以了，解除了匿名函数引用，就会把它的变量对象中引用的外部变量对象和全局变量对象释放出来，通知垃圾回收机制，把他们回收。

看到这里，大家应该明白了，什么是闭包？

闭包的副作用：变量和this对象

变量的问题

由于闭包引用的是外层对象的变量对象。如果我们遍历产生很多内部函数时，它们会引用统一变量对象。所以如下面的代码：

function createFunctionsVar(){
    var result = new Array();
    for(var i = 0;i<10;i++){
        result[i] = function() {
            return i;
        }
    }
    return result;
}
//调用
createFunctionsVar().forEach((item)=>{
    console.log(item())
})
//
10
10
...

这个函数返回一个数组，数组里包含了10个匿名函数，匿名函数的内部都返回外部函数的变量i。表面上看应该返回1,2,3,4,5...,但是不要忘了匿名函数保存的是外部函数的活动对象，而不是单个变量。所以在遍历的最后的时候，实际上那个变量值就变成了10，他们都是一个活动对象，所以值也相同。所以就全部打印的是10.如何解决呢？用原来的方法是，里面再给它套一层匿名函数。

function createFunctionsVar2() {
    var result = new Array();
    for(var i = 0;i<10;i++){
        result[i] = function(num) {
            return function() {
                return num
            };
        }(i);
    }
    return result;
}
//1,2,3,4,...

我们在匿名函数的内部又定义了一个匿名函数，在匿名函数的第一层我们定义了一个变量num。然后再它内部返回的匿名函数中返回外部函数的num。然后我们把第一层匿名函数直接调用。把i值给它传入进去，这样i值就会变成匿名函数的一个参数变量num，同时被立即执行而只有一个变量对象对应于它内部的匿名函数。这样就实现了我们想要的效果。

这也是为啥我们需要let和const.同样的代码。只需要替换var就可以了。

function createFunctionsLet(){
    const result = new Array();
    for(let i = 0;i<10;i++){
        result[i] = function() {
            return i;
        }
    }
    return result;
}

this对象的问题

我们都知道this对象是在运行时基于函数的执行环境绑定的；在全局函数中，this等于window，当函数被作为某个对象的方法调用时，this等于那个对象。但是，匿名函数的执行环境具有全局性，因此其this对象通常指向window。我们看下面的例子：

var name = "The window";
var object = {
    name:"My object",
    getNameFunc:function(){
        return function(){
            return this.name;
        }
    }
}
console.log(object.getNameFunc()());//The window (在非严格模式下)

上面的代码首先在全局中定义了一个变量name,定义了一个对象object，对象中定义了自己的name变量和一个返回匿名函数的函数getNameFunc，而匿名函数里则调用了this.name。
在上面的代码中，object.getNameFunc()()这个函数返回一个匿名函数，所以我们直接调用了它，结果打印出来的是The window,为什么呢？

每一个函数在调用时，其活动对象都会自动取得两个特殊变量：this和arguments。
内部函数在搜索这两个变量时，只会搜索到其活动对象为止。因此永远不可能直接访问到外部函数中的这两边变量。解决办法是，我们把外部作用域中的this对象保存在一个闭包能够访问到的的变量里。就可以让闭包访问到改对象了。

var name = "The window";
var object = {
    name:"My object",
    getNameFunc:function(){
        var that = this;
        return function(){
            return that.name;
        }
    }
}
console.log(object.getNameFunc()());//My object (在非严格模式下)

在最开始的例子里，this对象是在运行时基于执行环境进行绑定的，所以object.getNameFunc()返回的匿名函数在调用时绑定的this对象实际上是window。

而我们在上面的例子里，把this对象作为一个变量放在了闭包里，所以闭包的作用域链中保存了外部函数的活动对象，活动对象中保存了that作为this的值。所以我们可以通过这种方式来得到对象中name的值。

闭包的作用–模仿块级作用域

由于javaScript中没有块级作用域，所以像下面这样的例子中,

function outputNumbers(count) {
    for(var i = 0;i<count;i++){
        console.log(i)
    }

    i = 100;
    console.log(i);
}

for循环中定义的变量i应该在它遍历完成以后就销毁了，但是javaScript中并不是这样，而是还可以使用。

所以我们这里使用匿名函数来模仿块级作用域，它的语法如下：

(function(){
    //这里是块级作用域
})();

上面的代码定义并立即调用了一个匿名函数。将函数声明包含在一对圆括号中，表示它实际上是一个函数表达式，而紧随其后的另一对圆括号会立即调用这个函数。这是怎么出来的呢？
我们这里慢慢推导一下！是不是一脸懵逼？

立即执行函数的推理

首先看一下上面的代码的调用：

var count = 5;
outputNumbers(count);

我们定义了一个变量5把它赋值给count，然后把它传递给函数outputNumbers(count).
其实没有必要这样做，我们可以使用实际的值来取代变量count.

outputNumbers(5);

为什么可以取代呢？
因为变量只是值的另一种表现形式而已。
来，记住这句话。

下面我们定义一个函数：

var someFunction = function(){
    //这里是块级作用域
}
someFunction()

上面的例子中，我们定义了一个函数表达式，然后立即执行它。定义它的方式是，首先我们创建了一个匿名函数，然后我们把这个匿名函数赋值给了变量someFunction。而调用它的方式是在变量后面加上两个圆括号。someFunction().记得我们前面的那句话吗？
变量只是值的另一种表现形式而已。
那我们是不是可以把someFunction这个函数名替换为函数呢？

function(){
    //这里是块级作用域
}();//报错

直接报错，在语法上过不去，这是因为javaScript将关键字function当做一个函数声明的开始，而函数声明后面不能更圆括号。

但是，函数声明不行，函数表达式可以呀。而要将函数声明转变为函数表达式，就只需要给它套上一层圆括号就可以。

(function(){
    //这里是块级作用域
})();

那么现在我们改写一下最开始的代码。

function outputNumbers(count) {
    (function() {
        for(var i = 0;i<count;i++){
            console.log(i)
        }
    })();
    console.log(i);//报错
}
outputNumbers(10)

我们再在外面访问变量i就会报错。这是因为我们在它的里面定义了一个块级作用域。在匿名函数中定义的任何变量都会在执行结束的时候被销毁，因此变量只能在循环中使用，使用完后就被销毁了。

而在块级作用域中我们可以访问外部的变量count，因为这个匿名函数是一个闭包，它的作用域中保存了外部函数的活动对象，活动对象中保存了count这个变量，所以可以访问。

这种技术特别适合在全局作用域中使用，它可以限制添加过多的全局变量和函数。

闭包的作用–私有变量的封装

一个简单的例子：

function add(num1,num2){
    var sum = num1+num2;
    return sum
}

JavaScript中没有私有变量的概念，但是我们可以把变量放到函数中，函数中定义的变量，只有函数内自己可以访问，而外部并不能访问。

在上面的例子中函数定义了三个变量sum、num、num2。只有函数自己内部可以访问，而外部不能访问，我们可以使用闭包的特性，在函数中封装一个特权方法来操作这些私有的变量。

function MyObject() {
    //私有变量和私有函数
    var privteVariable = 10;
    
    function privateFunction() {
        return false;
    }
    //特权方法
    this.publicMethod = function() {
        privteVariable++;
        return privteVariable();
    }
}

这个模式在构造函数中定义了所有私有变量和函数。在我们使用这个构造函数后，除了this.publicMethod方法可以访问内部的私有变量，没有了其他的途径来访问。就达到了封装私有变量的目的。

over…

参考文章：JavaScript高级程序设计