[译]其实闭包并不高深莫测

其实闭包并不高深莫测

标签： JavaScript closure translate

---

本文由 伯乐在线 - 刘健超-J.c 翻译，Namco 校稿。未经许可，禁止转载！

英文出处：Igor Šarčević

几年前，我仍是一名高中生时，个人一个朋友向我讲述了闭包的概念。虽然我当时一点也不明白他想表达的内容，但他在向我讲述时却表现得很是高大上。对于当时的我来讲，闭包看来是一个深不可测的魔法。即便 Google 后也不能解除个人疑惑。而全部我能查阅的科技文章，都为高中生所难以理解。

如今的我回想起高中编程时光，我都会不由一笑。这是一篇试图用一些简单项目去解释闭包的文章，这会帮助个人学弟学妹们能轻易地驾驭强大的闭包。

计数事件

咱们将从一个简单的问题开始。若是将闭包引入到该程序中，将能轻易解决这个问题。
咱们为计数事件建立一个机制。该机制将有助于咱们跟踪代码的执行，甚至去调试一些问题。例如，我会如下面的方式调用计数器：

increment();  // Number of events: 1
increment();  // Number of events: 2
increment();  // Number of events: 3

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

var counter = 0;

function increment() {
  counter = counter + 1;
  console.log("Number of events: " + counter);
}

多个计数器

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

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

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

引入咱们第一个闭包

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

function createCounter() {
  var counter = 0;
 
  function increment() {
    counter = counter + 1;
    console.log("Number of events: " + counter);
  }
 
  return increment;
}

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

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

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

// fancyNewCounter is a function in this scope
// fancyNewCounter 是当前做用域的一个函数
 
var fancyNewCounter = createCounter();

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

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

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

var counter1 = createCounter();
counter1(); // Number of events: 1
counter1(); // Number of events: 2
 
var counter2 = createCounter();
counter2(); // Number of events: 1

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

counter1(); // Number of events: 3

为咱们的计数器命名

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

var catCounter = createCounter("cats");
var dogCounter = createCounter("dogs");
 
catCounter(); // Number of cats: 1
catCounter(); // Number of cats: 2
dogCounter(); // Number of dogs: 1

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

function createCounter(counterName) {
  var counter = 0;
 
  function increment() {
    counter = counter + 1;
 
    console.log("Number of " + counterName + ": " + counter);
  }
 
  return increment;
}

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

改善公用接口

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

var dogCounter = createCounter("dogs");

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

让咱们建立这样的一个实现：

function createCounter(counterName) {
  var counter = 0;
 
  function increment() {
    counter = counter + 1;
 
    console.log("Number of " + counterName + ": " + counter);
  };
 
  return { increment : increment };
}

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

增长一个减量

如今，咱们能很是简单地为咱们的计数器引入减量（decrement）。

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

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

尽管 display()与increment()、decrement() 函数看似大同小异，但因为咱们没有在返回对象里包含它，意味着如下代码将会调用失败：

var dogsCounter = createCounter("dogs");
 
dogsCounter.display(); // ERROR !!!

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

抽象数据类型

正如你所见，咱们经过闭包能很是简单地引入抽象数据类型。例如，让咱们经过闭包实现一个 堆栈)。

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 建立“真正的”隐藏域，或者须要建立简单的构造器时，闭包这个属性是很是好用的。不过对于通常的类来讲，闭包可能仍是有点过重了。

感谢您的阅读。 若是你以为这篇文章对您有帮助或者以为我翻译得不错，那给我个 star 吧。