几年前,我还是一名高中生时,我的一个朋友向我讲述了闭包的概念。虽然我当时一点也不明白他想表达的内容,但他在向我讲述时却表现得非常高大上。对于当时的我来说,闭包看来是一个深不可测的魔法。即使 Google 后也不能解除我的疑惑。而所有我能查阅的科技文章,都为高中生所难以理解。
现在的我回想起高中编程时光,我都会不禁一笑。这是一篇试图用一些简单项目去解释闭包的文章,这会帮助我的学弟学妹们能轻易地驾驭强大的闭包。
计数事件
我们将从一个简单的问题开始。如果将闭包引入到该程序中,将能轻易解决这个问题。
我们为计数事件创建一个机制。该机制将有助于我们跟踪代码的执行,甚至去调试一些问题。例如,我会以下面的方式调用计数器:
1
2
3
|
increment
(
)
;
// Number of events: 1
increment
(
)
;
// Number of events: 2
increment
(
)
;
// Number of events: 3
|
正如你所看到的上述案例,我们希望代码会在我们每次执行 increment() 函数时,会显示一条信息“Number of events: x”。下面以简单的方式实现该函数:
1
2
3
4
5
6
7
|
var
counter
=
0
;
function
increment
(
)
{
counter
=
counter
+
1
;
console
.
log
(
"Number of events: "
+
counter
)
;
}
|
多个计数器
上述代码非常简单明确。然而,当我们引入第二个计数器时,就会很快遇到问题。当然,我们能实现两个单独的计数器机制,如下面的代码,但很明显有需要改进的地方:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
var
counter1
=
0
;
function
incrementCounter1
(
)
{
counter1
=
counter1
+
1
;
console
.
log
(
"Number of events: "
+
counter1
)
;
}
var
counter2
=
0
;
function
incrementCounter2
(
)
{
counter2
=
counter2
+
1
;
console
.
log
(
"Number of events: "
+
counter2
)
;
}
incrementCounter1
(
)
;
// Number of events: 1
incrementCounter2
(
)
;
// Number of events: 1
incrementCounter1
(
)
;
// Number of events: 2
|
上述代码出现了不必要的重复。明显地,这种解决办法并不适用于超过二或三个记数器的情况。我们需要想出更好的解决方案。
引入我们第一个闭包
在保持与上述例子相似的情况下,我们以某种方式引入新的计数器,该计数器捆绑了一个能自增的函数,而且没有大量重复的代码。下面尝试使用闭包:
1
2
3
4
5
6
7
8
9
10
11
|
function
createCounter
(
)
{
var
counter
=
0
;
function
increment
(
)
{
counter
=
counter
+
1
;
console
.
log
(
"Number of events: "
+
counter
)
;
}
return
increment
;
}
|
让我们看看这是如何工作的。我们将创建两个计数器,并让它们跟踪两个独立的事件:
1
2
3
4
5
6
7
8
9
|
var
counter1
=
createCounter
(
)
;
var
counter2
=
createCounter
(
)
;
counter1
(
)
;
// Number of events: 1
counter1
(
)
;
// Number of events: 2
counter2
(
)
;
// Number of events: 1
counter1
(
)
;
// Number of events: 3
|
啊,这看起来有点复杂…然而,这实际上是非常简单的。我们只需将实现逻辑分成几个易于理解的块。下面就看看我们实现了什么:
- 首先,创建了一个名为
counter 的局部变量。
然后,创建了一个名为
increment 的局部函数,它能增加
counter 变量值。如果你从未接触过将函数作为数据来处理的函数式编程,这也许对你非常陌生。然而,这是非常常见的,而且只需要一些练习就能适应这一概念。
你应该注意到这一点,createCounter() 的实现与我们原先的计数器实现几乎一致。唯一不同的是它被包装或封装在一个函数体内。因此,这些构造器都被称为闭包。
现在是棘手的部分:
- 在
createCounter() 的最后一步返回了局部函数
increment。请注意,这并不是返回调用函数的运行结果,而是函数本身。
这就意味着,当我们在这个代码段下面创建新的计数器时,实际上是生成新函数。
1
2
3
4
|
// fancyNewCounter is a function in this scope
// fancyNewCounter 是当前作用域的一个函数
var
fancyNewCounter
=
createCounter
(
)
;
|
这就是闭包生命周期的力量所在。每个生成的函数,都会保持在 createCounter() 所创建的 counter 变量的引用。在某种意义上,被返回的函数记住了它所被创建时的环境。
在这里需要提醒大家注意的是,内部变量 counter 都是独立存在于每个作用域!例如,如果我们创建两个计数器,那么它们都会在闭包体内会分配一个新的 counter 变量。我们观察以下代码:
每个计数器都会从 1 算起:
1
2
3
4
5
6
|
var
counter1
=
createCounter
(
)
;
counter1
(
)
;
// Number of events: 1
counter1
(
)
;
// Number of events: 2
var
counter2
=
createCounter
(
)
;
counter2
(
)
;
// Number of events: 1
|
第二个计数器并不会干扰第一个计数器的值:
1
|
counter1
(
)
;
// Number of events: 3
|
为我们的计数器命名
信息“Number of events: x” 是没问题的,但如果能描述每个计数事件的类型,那么这将会更好。如以下例子,我们为计数器添加名字:
1
2
3
4
5
6
|
var
catCounter
=
createCounter
(
"cats"
)
;
var
dogCounter
=
createCounter
(
"dogs"
)
;
catCounter
(
)
;
// Number of cats: 1
catCounter
(
)
;
// Number of cats: 2
dogCounter
(
)
;
// Number of dogs: 1
|
我们仅需通过为闭包传递参数就能达到这种目的。
1
2
3
4
5
6
7
8
9
10
11
|
function
createCounter
(
counterName
)
{
var
counter
=
0
;
function
increment
(
)
{
counter
=
counter
+
1
;
console
.
log
(
"Number of "
+
counterName
+
": "
+
counter
)
;
}
return
increment
;
}
|
非常棒!请注意上述 createCounter() 函数的一个有趣行为。返回函数不仅记住了局部变量 counter,而且记住了传递进来的参数。
改善公用接口
我所说的公用接口是指,我们如何使用计数器。这并不单纯指,当被创建的计数器被调用时会增加值。
1
2
3
|
var
dogCounter
=
createCounter
(
"dogs"
)
;
dogCounter
.
increment
(
)
;
// Number of dogs: 1
|
让我们创建这样的一个实现:
1
2
3
4
5
6
7
8
9
10
11
|
function
createCounter
(
counterName
)
{
var
counter
=
0
;
function
increment
(
)
{
counter
=
counter
+
1
;
console
.
log
(
"Number of "
+
counterName
+
": "
+
counter
)
;
}
;
return
{
increment
:
increment
}
;
}
|
在上述代码段,我们简单地返回一个对象,该对象包含了该闭包的所有功能。在某种意义下,我们能定义闭包能返回的一系列信息。
增加一个减量
现在,我们能非常简单地为我们的计数器引入减量(decrement)。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
function
createCounter
(
counterName
)
{
var
counter
=
0
;
function
increment
(
)
{
counter
=
counter
+
1
;
console
.
log
(
"Number of "
+
counterName
+
": "
+
counter
)
;
}
;
function
decrement
(
)
{
counter
=
counter
-
1
;
console
.
log
(
"Number of "
+
counterName
+
": "
+
counter
)
;
}
;
return
{
increment
:
increment
,
decrement
:
decrement
}
;
}
var
dogsCounter
=
createCounter
(
"dogs"
)
;
dogsCounter
.
increment
(
)
;
// Number of dogs: 1
dogsCounter
.
increment
(
)
;
// Number of dogs: 2
dogsCounter
.
decrement
(
)
;
// Number of dogs: 1
|
隐藏计数器行为
上述代码有两处冗余的代码行。没错,就是 console.log。如果能创建一个专门用于显示计数器值的函数将会更好。让我们调用 display 函数。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
function
createCounter
(
counterName
)
{
var
counter
=
0
;
function
display
(
)
{
console
.
log
(
"Number of "
+
counterName
+
": "
+
counter
)
;
}
function
increment
(
)
{
counter
=
counter
+
1
;
display
(
)
;
}
;
function
decrement
(
)
{
counter
=
counter
-
1
;
display
(
)
;
}
;
return
{
increment
:
increment
,
decrement
:
decrement
}
;
}
var
dogsCounter
=
createCounter
(
"dogs"
)
;
dogsCounter
.
increment
(
)
;
// Number of dogs: 1
dogsCounter
.
increment
(
)
;
// Number of dogs: 2
dogsCounter
.
decrement
(
)
;
// Number of dogs: 1
|
increment() 和 decrement() 函数看起来非常相似,然而这是大相径庭的。我们没有在结果对象返回计数值!这意味着以下代码将会调用失败:
1
2
3
|
var
dogsCounter
=
createCounter
(
"dogs"
)
;
dogsCounter
.
display
(
)
;
// ERROR !!!
|
我们让 display() 函数对外部来说是不可见的。它仅在 createCounter() 内可用。
抽象数据类型
正如你所见,我们通过闭包能非常简单地引入抽象数据类型。例如,让我们通过闭包实现一个 堆栈。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
function
createStack
(
)
{
var
elements
=
[
]
;
return
{
push
:
function
(
el
)
{
elements
.
unshift
(
el
)
;
}
,
pop
:
function
(
)
{
return
elements
.
shift
(
)
;
}
}
;
}
var
stack
=
createStack
(
)
;
stack
.
push
(
3
)
;
stack
.
push
(
4
)
;
stack
.
pop
(
)
;
// 4
|
注意:在 JavaScript 中,闭包并不是堆栈数据类型的最佳实现方式。用 Prototype 实现会对内存更友好(译者注:在当前对象实例找不会相应属性或方法时,会到相应实例共同引用的 Prototype 属性寻找相应属性或方法(如果在当前Prototype属性找不到时,会沿着当前原型链向上查找),而Prototype 上的属性或方法是公用的,而不像实例的属性或方法那样,各自单独创建属性或方法,从而节省更多的内存)。
闭包与面向对象编程
如果你具有 面向对象编程 的经历,那么你应该会注意到上述构造器看来非常像类、对象、实例值和私有/公有方法。
闭包与类相似,都会将一些能操作内部数据的函数联系在一起。因此,你能在任何地方像使用对象一样使用闭包。
结语
闭包是编程语言一个很棒的属性。当我们想在 JavaScript 创建“真正的”隐藏域,或者需要创建简单的构造器时,闭包这个属性是非常好用的。不过对于一般的类来说,闭包可能还是有点太重了。