从一个函数的实现说起
话说,我要写这么一个函数 getCallCounter
, 该函数无参数,返回一个数字,第一次调用返回1,第二次调用返回2,... ,以此类推,即
console.log( getCallCounter() ); //输出为1
console.log( getCallCounter() ); //输出为2
console.log( getCallCounter() ); //输出为3
全局变量实现
拿到这个需求之后,我们最简单的想法就是写一个全局变量,并初始化为0,每次调用 getCallCounter
时,首先将该全局变量加1,并返回该全局变量,代码如下:
var g_counter = 0;
function getCallCounter(){
g_counter += 1;
return g_counter;
}
上述代码非常简单,也达到了要求。但是有一个问题,我们定义了一个 “累赘” -- g_counter
,g_counter
的定义导致了2个问题:
污染了全局作用域区,因为只有函数
getCallCounter
会用到该变量,所以,该变量应该遵守 "谁要使用,谁来管理" 的原则,而不是放在全局变量区;任何代码段都能取得
g_counter
,导致了getCallCounter
对g_counter
不能做到完全控制。如果其他代码修改了g_counter
,那就不能保证每次调用getCallCounter
,我们都能得到一个递增的数;
以上两点不足是相互联系的,正是由于明明应该限定在 getCallCounter
函数中的变量却放在全局区,才导致上面两个问题。
因此,我们将定义放到函数中;
改进1
function getCallCounter(){
var counter = 0;
counter += 1;
return counter;
}
改成上述代码后, counter
受到 getCallCounter
的完全控制,但是,每次调用该函数后,返回都是1;
这是因为函数有自己的作用域,每次完成函数调用,函数中的变量不再被引用,之后将会被 垃圾回收机制 所销毁,再次调用时,又会创建新的局部变量,因此, getCallCounter
返回的一直是 1;
C语言的实现
为了让延长函数中局部变量的声明周期(而不是函数执行完后,内存就被释放掉),C语言中通过关键字 static
为其 "增寿";
int getCallCounter(){
static int counter = 0;
counter += 1;
return counter;
}
这样,我们每次调用 getCallCounter
,都能够得到一个递增的数;
但这毕竟是C语言的实现,那么JavaScript如何实现呢?
解决生命周期问题
我们首先要做的,就是像C语言一样解决局部变量生命周期过短的问题。
为了保证不被 垃圾回收机制 这个 "刽子手" 所干掉,我们必须始终保持对局部变量的使用,因为 垃圾回收机制 只是针对没用的数据,而那些还会被使用的数据是不会被当成垃圾的!
所以我们有了下面的代码:
function f(){
var counter = 0;
return function(){
counter += 1;
return counter;
}
}
var getCallCounter = f();
首先,我们定义了一个函数 f ,该函数返回一个函数,因为返回的函数能够获得 f 中的局部变量,所以返回的函数能够得到变量 counter
的值,即 在全局变量作用域中调用一个函数得到了局部作用域中的变量。
其次,我们通过变量 getCallCounter
来存放返回的函数,说明返回的函数始终存在变量对该函数引用,因此该返回函数不会被销毁;而返回的函数又使用了局部变量 counter
,那么解释器就认为 counter
也是有用的,只要 getCallCounter
不被销毁,该临时变量也将不会被销毁;
闭包的官方定义是:
一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。
Excuse me ? 官方的定义总是会用一些看起来高大上的话让你觉得牛逼,但是,你就是看不懂。。。
我的理解是:就是一个函数的返回值是一个函数,那么就形成一个函数被另一个函数所 封闭 的情形,而被返回的函数能够调用定义它的函数中的所有变量,这就形成闭包;
虽然可能不准确,但至少好记忆,好理解。
美化
我们看到前面的函数 f 只被调用了一次,对于这些只调用一次的函数,完全可以写成 匿名的立即执行的 函数,修改后,代码为:
var getCallCounter = ( function(){
var counter = 0;
return function(){
counter += 1;
return counter;
}
} )();
如此,便可优雅的完成最开始的要求。
完。