原文连接:http://web.jobbole.com/84456/前端
原文推荐的前端书籍的连接:http://web.jobbole.com/86734/web
咱们将从一个简单的问题开始。若是将闭包引入到该程序中,将能轻易解决这个问题。编程
咱们为计数事件建立一个机制。该机制将有助于咱们跟踪代码的执行,甚至去调试一些问题。例如,我会如下面的方式调用计数器:闭包
JavaScript编程语言
1函数式编程 2函数 3this |
increment(); // Number of events: 1spa increment(); // Number of events: 2调试 increment(); // Number of events: 3 |
正如你所看到的上述案例,咱们但愿代码会在咱们每次执行 increment() 函数时,会显示一条信息“Number of events: x”。下面以简单的方式实现该函数:
JavaScript
1 2 3 4 5 6 7 |
var counter = 0;
function increment() { counter = counter + 1;
console.log("Number of events: " + counter); } |
上述代码很是简单明确。然而,当咱们引入第二个计数器时,就会很快遇到问题。固然,咱们能实现两个单独的计数器机制,以下面的代码,但很明显有须要改进的地方:
JavaScript
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 |
上述代码出现了没必要要的重复。明显地,这种解决办法并不适用于超过二或三个记数器的状况。咱们须要想出更好的解决方案。
在保持与上述例子类似的状况下,咱们以某种方式引入新的计数器,该计数器捆绑了一个能自增的函数,并且没有大量重复的代码。下面尝试使用闭包:
JavaScript
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; } |
让咱们看看这是如何工做的。咱们将建立两个计数器,并让它们跟踪两个独立的事件:
JavaScript
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。请注意,这并非返回调用函数的运行结果,而是函数自己。
这就意味着,当咱们在这个代码段下面建立新的计数器时,其实是生成新函数。
JavaScript
1 2 3 4 |
// fancyNewCounter is a function in this scope // fancyNewCounter 是当前做用域的一个函数
var fancyNewCounter = createCounter(); |
这就是闭包生命周期的力量所在。每一个生成的函数,都会保持在 createCounter() 所建立的 counter 变量的引用。在某种意义上,被返回的函数记住了它所被建立时的环境。
在这里须要提醒你们注意的是,内部变量 counter 都是独立存在于每一个做用域!例如,若是咱们建立两个计数器,那么它们都会在闭包体内会分配一个新的 counter 变量。咱们观察如下代码:
每一个计数器都会从 1 算起:
JavaScript
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 |
第二个计数器并不会干扰第一个计数器的值:
JavaScript
1 |
counter1(); // Number of events: 3 |
信息“Number of events: x” 是没问题的,但若是能描述每一个计数事件的类型,那么这将会更好。如如下例子,咱们为计数器添加名字:
JavaScript
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 |
咱们仅需经过为闭包传递参数就能达到这种目的。
JavaScript
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,并且记住了传递进来的参数。
我所说的公用接口是指,咱们如何使用计数器。这并不单纯指,当被建立的计数器被调用时会增长值。
JavaScript
1 2 3 |
var dogCounter = createCounter("dogs");
dogCounter.increment(); // Number of dogs: 1 |
让咱们建立这样的一个实现:
JavaScript
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)。
JavaScript
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 函数。
JavaScript
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() 函数看起来很是类似,然而这是截然不同的。咱们没有在结果对象返回计数值!这意味着如下代码将会调用失败:
JavaScript
1 2 3 |
var dogsCounter = createCounter("dogs");
dogsCounter.display(); // ERROR !!! |
咱们让 display() 函数对外部来讲是不可见的。它仅在 createCounter() 内可用。
正如你所见,咱们经过闭包能很是简单地引入抽象数据类型。例如,让咱们经过闭包实现一个 堆栈。
JavaScript
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 建立“真正的”隐藏域,或者须要建立简单的构造器时,闭包这个属性是很是好用的。不过对于通常的类来讲,闭包可能仍是有点过重了。