其实闭包并不高深莫测
标签： 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 吧。
