[JS]闭包就是这么简单

十分钟掌握版

什么是闭包

闭包是指有权访问另一个函数作用域中的变量的函数

这句话怎么理解？别急。我们先看一个例子：

function fun(){
    //函数内部定义了一个函数变量
    var privateVal="private value";
}
console.log(privateVal);   //报错：privateVal is not defined
var temFun=fun; 
console.log(temFun.privateVal)； //报错：privateVal is not defined

根据JS中作用域链的概念( 什么是JS作用域链):

内部环境能够通过作用域链访问所有外部环境变量和函数，外部环境不能访问内部环境的任何变量和函数

所以我们在全局作用域中访问不到函数fun()中的privateVal变量。

当当当，这时候就轮到我们闭包上场了：

function fun(){
    //函数内部的变量，函数外部无法访问
    var privateVal="private value";

    //下面就是闭包的精髓：
    //在函数内部返回一个匿名函数，匿名函数能够访问fun函数的变量
    return function(){
        return privateVal;
    }
}
fun()();      //第一个()执行了fun函数，返回值是一个匿名函数；第二个执行了匿名函数
              //因此输出了：“private value”

//以下代码，等同于fun()()

var temFun=fun();
console.log(temFun());    //输出:“private value”

上面这个例子很好的解释了闭包的用法和概念：

闭包是指有权访问另一个函数作用域中的变量的函数

闭包的使用场景

封装局部变量

例如：一个游戏，主人公有10条命，我们如果把var live=10写在全局作用域的话，全局中任何地方都能调用修改，就会出现安全性，容易出bug。

但如果写在局部作用域，会有如下问题：

1、在全局环境中却调用不了。

2、局部环境执行完毕后，会被清出环境栈，局部环境中的变量和函数都会垃圾回收机制回收。（关于为什么函数环境执行完毕，闭包函数还能访问上一个函数的变量，我们在下面再详细分析）

因此我们用闭包去将var live=10变量封装起来。

function liveFun(){
   var live=10; 
    //下面是闭包函数代码
    return function(condition){
        if(condition=="add"){
            return live+=1;
        }else if(condition== "reduce"){
            return live-=1;
        }
    }
}
var live=liveFun();
console.log(live("add"));   //执行闭包函数，10+1=11，输出：11；
console.log(live("reduce"));   //执行闭包函数，11-1=10，又输出：10

应付面试

其实闭包函数在框架中使用的比较多，例如上一个时代：JQuery。框架源码中就有很多闭包函数的影子。
所以在日常开发中，闭包使用的频率不是很高，但不代表作为优秀的程序的我们可以不掌握。

闭包拓展包

为什么函数执行完毕，闭包函数还能访问函数的变量

在我们上一个游戏，生命控制设计的代码中，我们可以看到liveFun()函数执行完毕了。

按照作执行环境的设计理念，局部函数执行完毕后，会从环境栈中清出局部环境，并回收其局部函数中的变量和函数。

那不禁让人想问：为什么liveFun()函数执行完毕后，闭包函数还能访问liveFun()函数的live变量。

其实这是因为：在闭包中，会将包含函数（即外部函数）的活动对象(简单理解，就是外部函数的变量和方法)添加到它的作用域中。

因此,当liveFun()函数执行完毕后，其执行环境的作用域被销毁回收，但它的活动对象仍然留存在内存中，直到匿名函数被销毁后，liveFun()的活动对象才会被销毁。

关于闭包和变量

闭包只能取得包含函数（外部函数）中任何变量的最后一个值
先看下面的例子：

function fun(){
    var result=new Array();
    for(var i=0;i<10;i++){
        result[i]=function(){
            return i;
        }
    }
    return result;
}
var result=fun();
console.log(result[0]());   //为什么输出：10？

上面的代码，我们在for循环中给var result数组添加了一个闭包函数，闭包函数返回i的值。我们预期的结果是，restlt[0]()输出的结果应该是0，result[1]()的结果是1。以此类推。

但我们发现每个函数都返回10。这是为什么？

因为当fun()函数执行完毕后，存在活动对象中的i已经变成10，此时再去调用匿名函数，匿名函数访问活动变量中的值，当然都是10。

这样的情况经常出现在实际操作中，我们通过for循环给elements去设置onclick事件去输出对应位置的时候。我们发现不管点击哪个element，它输出都是循环中的最后一个值。

因此，我们可以通过以下立即执行函数进行改造,把i的值绑定在闭包函数内部。

function fun(){
    var result=new Array();
    for(var i=0;i<10;i++){
        result[i]=function(num){
            return function(){
                return num;
            }
        }(i)
    }
    return result;
}
var result=fun();
console.log(result[0]());   //输出：0
console.log(result[0]());   //输出：1

最后复盘：

1、闭包是指有权访问另一个函数作用域中的变量的函数

2、当包含函数执行完毕后，其执行环境的作用域被销毁回收，但它的活动对象仍然留存在内存中，直到匿名函数被销毁后，包含函数的活动对象才会被销毁。

3、闭包只能取得包含函数（外部函数）中任何变量的最后一个值

4、面试遇到闭包函数的问题深呼吸，冷静，想想大麦的文字。

我是大麦，如果喜欢我的文章请给我一个小心心哦。