十分钟掌握版
什么是闭包
闭包是指有权访问另一个函数作用域中的变量的函数
这句话怎么理解?别急。我们先看一个例子:
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