几年前,我还是一名高中生时,我的一个朋友向我讲述了闭包的概念。虽然我当时一点也不明白他想表达的内容,但他在向我讲述时却表现得非常高大上。对于当时的我来说,闭包看来是一个深不可测的魔法。即使 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。请注意,这并不是返回调用函数的运行结果,而是函数本身。
这就意味着,当我们在这个代码段下面创建新的计数器时,实际上是生成新函数。
几年前,我还是一名高中生时,我的一个朋友向我讲述了闭包的概念。虽然我当时一点也不明白他想表达的内容,但他在向我讲述时却表现得非常高大上。对于当时的我来说,闭包看来是一个深不可测的魔法。即使 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。请注意,这并不是返回调用函数的运行结果,而是函数本身。
这就意味着,当我们在这个代码段下面创建新的计数器时,实际上是生成新函数。