JavaScript | 闭包
Reference : JavaScript教程 - 廖雪峰的官方网站
闭包(Closure)是JavaScript中相当有趣的一个特性,学起来稍有一些难度。这篇文章讲解JavaScript中的闭包,遵循先知道是什么,再知道为什么的顺序。
什么是闭包
(本节基础:函数、高阶函数;本节参考:闭包 - 廖雪峰的官方网站)
我们通常定义的函数,比如说sum
,调用sum([1, 2, 3, 4, 5])
即得到结果。
function sum (arr) {
return arr.reduce(function (x, y) {
return x + y;
});
}
sum ([1, 2, 3, 4, 5]);
JavaScript的语法提供了一种特性:我们可以返回函数内定义的函数。这个特性看起来有点晕,我们接着上面的例子来理解。
现在我定义另一个函数lazy_sum
,并利用上述特性,返回一个函数内定义的函数。
function lazy_sum(arr) {
var sum = function () {
return arr.reduce (function (x, y) {
return x + y;
});
};
return sum;
}
现在我们调用lazy_sum
,返回的结果是一个新的函数。
var f = lazy_sum([1, 2, 3, 4, 5]);
但毕竟函数f
还没有被执行,现在我们并没有任何一个变量实际保存了对数组求和的结果。想要得到结果,需要调用函数f
。
f(); // 15
函数f
没有参数的原因是在lazy_sum
中定义sum
时,指定sum
没有参数。
现在我们对闭包有了一个初步的印象,你可能会觉得奇怪,这个特性看上去怎么这样鸡肋?其实我刚开始对闭包也是同样的评价,但接下来,我将试图从闭包的实现方式上深入地讲解闭包,并在本文最后给出闭包地几个相当重要地用法。
闭包
(本节基础:闭包的概念、变量作用域、编译原理;本节参考:1. 深入理解javascript原型和闭包, 2. 闭包 - JavaScript | MDN)
我们再看一下之前定义的lazy_sum
。
function lazy_sum(arr) {
var sum = function () {
return arr.reduce (function (x, y) {
return x + y;
});
};
return sum;
}
学过编译原理的朋友应该明白,函数中的变量作用域限于整个函数,在编译时,其符号表(symbol table)会在进入函数时创建,离开函数时删除。那么我们仔细分析,闭包是否与编译函数时符号表有冲突。
var f = lazy_sum([1, 2, 3, 4, 5])
当我们调用lazy_sum
,传入参数时,lazy_sum
的符号表被创建,局部变量arr
记录在其中,在这个例子里,arr
的值是[1, 2, 3, 4, 5]
。函数执行结束后,sum
作为结果返回,且lazy_sum
的符号表被删除,此时关于arr
的信息也被删除。
但奇怪的是,我们此时调用f
,相当于调用sum
时,却能得到求和的正确结果。按理来说,此时arr
的值在符号表中已经找不到了。
看似闭包不符合编译原理,实际上,开发者为了实现闭包,特意修改了JavaScript的符号表规则。一般的语言,如C,Java等,符号表遵循在本节开头所述规则:符号表会在进入函数时创建,离开函数时删除。然而为了实现闭包,JavaScript的符号表规则如下:
当闭包出现时,该函数执行后,其符号表不删除。
用在上面的例子里就是说:由于lazy_sum
是闭包,所以调用后其符号表不删除。这样,我们就不难理解为什么在之后调用f
,我们还能得到sum
的值。
如果到这里还能看懂,那么恭喜你已经理解了闭包的绝大部分奥秘;如果看的一头雾水,那说明笔者功力尚浅,没能把闭包的原理讲清楚,推荐不太明白的读者转到本节的参考文章,应该能有所收获。
我们来看下面一个例子:
function fn() {
var max = 10;
return function bar (x) {
if (x > max) {
console.log(x);
}
};
}
var f1 = fn(),
max = 100;
f1(15);
运用闭包的符号表规则,调用fn()
后,其符号表保留,调用f1(15)
时,相当于调用bar(15)
,这时在bar
的符号表中寻找变量max
,没有找到,按照规则,到定义它的域中寻找(注意不是父域,本例中定义bar
的域时fn
函数体,f1
的父域时全局域),找到保留下来的fn
符号表中,max
的值为10,所以在控制台显示15。
这个例子里存疑的地方在于,通常,当函数中出现一个变量名时,我们先在函数体中寻找,若没有,则逐层在父域的符号表中查找。然而,我们发现,f1
调用时,max
变量的值首先在bar
函数体内没有找到,接着却没有向父域(全局域)中查找,而是向定义bar
函数的域,即fn
的函数体查找。
可见,闭包在形式上将函数fn
内定义的bar
函数返回了出来,而实际上bar
函数始终没能离开fn
的函数体,bar
的函数体中引用的变量max
始终与fn
的函数体中定义的变量max
绑定。
所以,我们调用f1(15)
的效果,与直接在fn
内调用bar(15)
的效果一样。这就是闭包的功能:将闭包函数closure
视为一个整体,通过保留其符号表将函数体内申明的变量variable
保留下来;通过在closure
内定义其他函数operation
实现对内部变量variable
的操作,并将operation
作为closure
的返回结果,我们能够在closure
外借助具有operation
值的函数对象,完成对variable
的操作。
其实对闭包的讨论可以到此为止,但如果我们将视野放到JavaScript的语法之外,我们发现:闭包的用法与面向对象语言非常类似;闭包类似于一个类,其中的变量类似私有成员,定义的函数类似于类的公有方法。因此,JavaScript这样一个只有函数而没有类的语言,借助闭包,也有了面向对象语言的能力。
下面这个例子有助于让你将闭包与面向对象语言中的类建立联系:
函数create_counter
创建了一个计数器。
function create_counter(initial) {
var x = initial || 0;
return {
inc: function () {
x += 1;
return x;
}
};
}
用法如下:
var c1 = create_counter();
c1.inc(); // 1
c1.inc(); // 2
c1.inc(); // 3
var c2 = create_counter(10);
c2.inc(); // 11
c2.inc(); // 12
c2.inc(); // 13
在这个例子里,外部代码无法访问到变量x
,却可以通过返回的对象修改x
的值。这时我们就意识到了闭包的强大,它甚至可以作为构建类似于类的一种工具。
闭包的常见用法
- 封装私有变量
前面提到的计数器就是一个很好的例子。
function create_counter(initial) {
var x = initial || 0;
return {
inc: function () {
x += 1;
return x;
}
};
}
- 封装多参数函数,得到单参数函数
比如通过封装原生的Math.pow(x, y)
函数得到pow2
和pow3
:
function make_pow(n) {
return function (x) {
return Math.pow(x, n);
}
}
var pow2 = make_pow(2); // x**2
var pow3 = make_pow(3); // x**3
- 模块模式 (module pattern)
用闭包模拟类
var Counter = (function() {
var privateCounter = 0;
function changeBy(val) {
privateCounter += val;
}
return {
increment: function() {
changeBy(1);
},
decrement: function() {
changeBy(-1);
},
value: function() {
return privateCounter;
}
}
})();
console.log(Counter.value()); /* logs 0 */
Counter.increment();
Counter.increment();
console.log(Counter.value()); /* logs 2 */
Counter.decrement();
console.log(Counter.value()); /* logs 1 */
上述代码定义了对象Counter
注意在上述代码中使用了”创建一个匿名函数并立即执行“的语法。
(function (x) {
return x * x;
})(3); // 9
理论上讲,创建一个匿名函数并立即执行可以这么写:
function (x) { return x * x } (3);
但是由于JavaScript语法解析问题,会报SyntaxError错误,因此需要用括号把整个函数定义括起来:
(function (x) { return x * x }) (3);
通常,一个立即执行的匿名函数可以把函数体拆开,一般这么写:
(function (x) {
return x * x;
})(3);
闭包的弊端
本来我觉得脚本语言很少考虑性能问题,不想提这一点的。然而我看到几乎每篇介绍闭包的博客都提到了用闭包的弊端,想必不是一个可以忽视的问题,因此在此补上。
如果不是某些特定任务需要使用闭包,在其他函数中创建函数是不明智的,因为闭包在处理速度和内存消耗方面对脚本性能有负面影响。
更多细节可以参考前文中提到的几篇参考文章,在此不再赘述。