十分钟掌握版
什么是闭包
闭包是指有权访问另一个函数作用域中的变量的函数
这句话怎么理解？别急。我们先看一个例子：
function fun(){ //函数内部定义了一个函数变量 var privateVal="private value";
}console.log(privateVal); //报错：privateVal is not definedvar 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
随时随地看视频
