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