闭包(closure)是什么东西
我面试前端基本都会问一个问题"请描述一下闭包"。相当多的应聘者的反应都是断断续续的词,“子函数”“父函数”“变量”,支支吾吾的说不清楚。我提示说如果你表述不清楚你可以写一小段代码示例一下。这个基本都会,比如这样:
- function A() {
- var i = 0;
- return function(){return i++;}
- }
看得出来他知道什么叫闭包,但是却又不清楚,只知道这么个写法,但是却又不是足够熟悉。那么本文就来深入探讨一下,闭包到底是个什么东西。
从C语言开始
- int calc(int a, int b) {
- int tempA = a * a;
- int tempB = b * b;
- int c = tempA + tempB;
- return c;
- }
- int main() {
- int sum = calc(3, 4);
- return 0;
- }
当函数calc调用的时候,main函数将两个参数,3,4压栈,然后进入calc函数。calc函数中用两个局部变量tempA,tempB来保存它们的平方。计算完和之后,将平方和返回给main函数。那么calc返回之后,如何访问tempA,tempB呢?答案是没法访问。calc函数退栈之后,这俩局部变量销毁了。局部变量的生命周期就是在他所在的子函数执行的时候存在,执行完成之后就销毁,赤裸裸的兔死狗烹。所以局部变量经常被叫做临时变量,这确实名副其实。
再来讲闭包
闭包的特性
- //modue1
- var m1,m2,m3;
- function foo1(){...}
- function foo2(){...}
- //module2
- var s1,s2,s3;
- function sb1(){...}
- function sb2(){...}
代码中引入了这个两个JS文件module1和module2.如果变量,函数较多,万一出现重名了,别的模块的变量就会被莫名其妙的修改,那么一些匪夷所思的bug就会出来。为了避免重名,当然可以规定前缀,命名规范等等,但是这治标不治本。让开发人员麻烦不说,当模块变多,维护这种规范的难度就会明显上升。结合刚才的闭包的特性,所以我们可以吧代码改成这样:
- //modue1
- function module1(){
- var m1,m2,m3;
- function foo1(){...}
- function foo2(){...}
- return{
- "foo1":foo1,
- "foo2":foo2
- }
- }
- //module2
- function module2(){
- var s1,s2,s3;
- function sb1(){...}
- function sb2(){...}
- return{
- "sb1":sb1,
- "sb2":sb2
- }
- }
当使用一个模块的时候,调用这个模块对应的函数即可,顶层的名空间就是模块的名字,这样维护起来就会方便很多。当然,大型项目中的多模块协作用闭包是一个手段,还有一个手段就是面向对象,这个我以后的文章会讲到。
闭包的另外一个容易忽略的特性就是一个闭包内的变量会被这个闭包对应的所有子函数共享。说起来有点拗口,我们来举个例子:
- function test() {
- var array = [];
- for(var i = 0; i < 10; i++) {
- array[i] = function(){return i;}
- }
- return array;
- }
这段代码返回了一个数组,数组里面的每一个元素都是一个函数。那么有下面的测试代码:
- var a = test();
- a[0](); //返回几?
看起来它应该返回0啊。这个函数产生的时候i = 0。这就错了,事实上这个函数会返回10,并且这个数组里面所有的函数都返回10.为什么呢?刚才有提到,数组中的所有的函数共享一个闭包,就是test函数的局部变量i。当test执行完成之后,i是几呢?当然是10.所以数组中的函数就都返回10了。这个特性经常被刚接触闭包的程序员忽视。当制造闭包的函数中有循环,条件语句的时候,经常会出现错误。这个要小心了。
此外,闭包是可以嵌套的。相信如果你前面的内容看懂了的话,理解嵌套闭包就是易如反掌了,在此我不做赘述。