转一篇关于闭包的文章

JavaScript闭包实践

最新推荐文章于 2025-09-07 22:13:39 发布

转载最新推荐文章于 2025-09-07 22:13:39 发布 · 78 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2963099/blog/863142

文章标签：

#javascript #python #前端 #ViewUI

2019独角兽企业重金招聘Python工程师标准>>>

原文链接：http://web.jobbole.com/84456/

原文推荐的前端书籍的链接：http://web.jobbole.com/86734/

计数事件

我们将从一个简单的问题开始。如果将闭包引入到该程序中，将能轻易解决这个问题。

我们为计数事件创建一个机制。该机制将有助于我们跟踪代码的执行，甚至去调试一些问题。例如，我会以下面的方式调用计数器：

JavaScript

increment(); // Number of events: 1

increment(); // Number of events: 2

increment(); // Number of events: 3

正如你所看到的上述案例，我们希望代码会在我们每次执行 increment() 函数时，会显示一条信息“Number of events: x”。下面以简单的方式实现该函数：

JavaScript

var counter = 0;

function increment() {

counter = counter + 1;

console.log("Number of events: " + counter);

}

多个计数器

上述代码非常简单明确。然而，当我们引入第二个计数器时，就会很快遇到问题。当然，我们能实现两个单独的计数器机制，如下面的代码，但很明显有需要改进的地方：

JavaScript

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

上述代码出现了不必要的重复。明显地，这种解决办法并不适用于超过二或三个记数器的情况。我们需要想出更好的解决方案。

引入我们第一个闭包

在保持与上述例子相似的情况下，我们以某种方式引入新的计数器，该计数器捆绑了一个能自增的函数，而且没有大量重复的代码。下面尝试使用闭包：

JavaScript

function createCounter() {

var counter = 0;

function increment() {

counter = counter + 1;

console.log("Number of events: " + counter);

}

return increment;

}

让我们看看这是如何工作的。我们将创建两个计数器，并让它们跟踪两个独立的事件：

JavaScript

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。请注意，这并不是返回调用函数的运行结果，而是函数本身。

这就意味着，当我们在这个代码段下面创建新的计数器时，实际上是生成新函数。

JavaScript

// fancyNewCounter is a function in this scope

// fancyNewCounter 是当前作用域的一个函数

var fancyNewCounter = createCounter();

这就是闭包生命周期的力量所在。每个生成的函数，都会保持在 createCounter() 所创建的 counter 变量的引用。在某种意义上，被返回的函数记住了它所被创建时的环境。

在这里需要提醒大家注意的是，内部变量 counter 都是独立存在于每个作用域！例如，如果我们创建两个计数器，那么它们都会在闭包体内会分配一个新的 counter 变量。我们观察以下代码：

每个计数器都会从 1 算起：

JavaScript

var counter1 = createCounter();

counter1(); // Number of events: 1

counter1(); // Number of events: 2

var counter2 = createCounter();

counter2(); // Number of events: 1

第二个计数器并不会干扰第一个计数器的值：

JavaScript

1	counter1(); // Number of events: 3

为我们的计数器命名

信息“Number of events: x” 是没问题的，但如果能描述每个计数事件的类型，那么这将会更好。如以下例子，我们为计数器添加名字：

JavaScript

var catCounter = createCounter("cats");

var dogCounter = createCounter("dogs");

catCounter(); // Number of cats: 1

catCounter(); // Number of cats: 2

dogCounter(); // Number of dogs: 1

我们仅需通过为闭包传递参数就能达到这种目的。

JavaScript

function createCounter(counterName) {

var counter = 0;

function increment() {

counter = counter + 1;

console.log("Number of " + counterName + ": " + counter);

}

return increment;

}

非常棒！请注意上述 createCounter() 函数的一个有趣行为。返回函数不仅记住了局部变量 counter，而且记住了传递进来的参数。

改善公用接口

我所说的公用接口是指，我们如何使用计数器。这并不单纯指，当被创建的计数器被调用时会增加值。

JavaScript

var dogCounter = createCounter("dogs");

dogCounter.increment(); // Number of dogs: 1

让我们创建这样的一个实现：

JavaScript

function createCounter(counterName) {

var counter = 0;

function increment() {

counter = counter + 1;

console.log("Number of " + counterName + ": " + counter);

};

return { increment : increment };

}

在上述代码段，我们简单地返回一个对象，该对象包含了该闭包的所有功能。在某种意义下，我们能定义闭包能返回的一系列信息。

增加一个减量

现在，我们能非常简单地为我们的计数器引入减量（decrement）。

JavaScript

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 函数。

JavaScript

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() 函数看起来非常相似，然而这是大相径庭的。我们没有在结果对象返回计数值！这意味着以下代码将会调用失败：

JavaScript

var dogsCounter = createCounter("dogs");

dogsCounter.display(); // ERROR !!!

我们让 display() 函数对外部来说是不可见的。它仅在 createCounter() 内可用。

抽象数据类型

正如你所见，我们通过闭包能非常简单地引入抽象数据类型。例如，让我们通过闭包实现一个堆栈。

JavaScript

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 上的属性或方法是公用的，而不像实例的属性或方法那样，各自单独创建属性或方法，从而节省更多的内存）。