JavaScript 闭包

Posted 2021-01-03 何博

实用的闭包

　　通常你使用只有一个方法的对象的地方，都可以使用闭包。在 Web 中，你想要这样做的情况特别常见。大部分我们所写的 javascript 代码都是基于事件的 — 定义某种行为，然后将其添加到用户触发的事件之上（比如点击或者按键）。我们的代码通常作为回调：为响应事件而执行的函数。假如，我们想在页面上添加一些可以调整字号的按钮。一种方法是以像素为单位指定 body 元素的 font-size，然后通过相对的 em 单位设置页面中其它元素（例如header）的字号：

1 function makeSizer(size) {
2     return function () {
3         document.body.style.fontSize = size + ‘px‘;
4         console.log(size);
5     };
6 }

1     <input type="button" onclick="makeSizer(12)();" name="button" id="btn12" value="12">
2     <input type="button" onclick="makeSizer(14)();" name="button" id="btn14" value="14">
3     <input type="button" onclick="makeSizer(16)();" name="button" id="btn16" value="16">

用闭包模拟私有方法

　　常用编程语言中，比如 Java、C#，是支持将方法声明为私有的，即它们只能被同一个类中的其它方法所调用; 而JavaScript没有这种原生支持，但我们可以使用闭包来模拟私有方法。私有方法不仅仅有利于限制对代码的访问：还提供了管理全局命名空间的强大能力，避免非核心的方法弄乱了代码的公共接口部分。

　　下面的示例展现了如何使用闭包来定义公共函数，并令其可以访问私有函数和变量。这个方式也称为模块模式

 1 var Counter = (function () {
 2     var privateCounter = 0,count;
 3 
 4     function changeBy(val) {
 5         privateCounter += val;
 6         count += val;
 7     }
 8     return {
 9         increment: function () {
10             console.log(‘value +1‘);
11             changeBy(1);
12         },
13         decrement: function () {
14             console.log(‘value -1‘);
15             changeBy(-1);
16         },
17         value: function () {
18             console.log(‘value is :%s‘,privateCounter);
19             return privateCounter;
20         },
21         num:count
22     }
23 })();
24 
25 var Counter1 = Counter;
26 var Counter2 = Counter;
27 console.log(Counter1.value()); // 0 
28 Counter1.increment();
29 Counter1.increment();
30 console.log(Counter1.value()); // 2 
31 console.log(Counter2.value()); // 2 
32 Counter1.decrement();
33 console.log(Counter1.value()); // 1 
34 console.log(Counter2.value()); // 1 

　　每个闭包都有它自己的词法环境；而这次我们只创建了一个词法环境，为三个函数所共享：Counter.increment，Counter.decrement 和 Counter.value。
该共享环境创建于一个立即执行的匿名函数体内。这个环境中包含两个私有项：名为 privateCounter 的变量和名为 changeBy 的函数。这两项都无法在这个匿名函数外部直接访问。必须通过匿名函数返回的三个公共函数访问。
这三个公共函数是共享同一个环境的闭包。多亏 JavaScript 的词法作用域，它们都可以访问 privateCounter 变量和 changeBy 函数。

注意我们定义了一个匿名函数，用于创建一个计数器。我们立即执行了这个匿名函数，并将他的值赋给了变量counter。我们可以把这个函数储存在另外一个变量makeCounter中，并用他来创建多个计数器。

 1 var Counter = function () {
 2     var privateCounter = 0, count;
 3 
 4     function changeBy(val) {
 5         privateCounter += val;
 6         count += val;
 7     }
 8     return {
 9         increment: function () {
10             console.log(‘value +1‘);
11             changeBy(1);
12         },
13         decrement: function () {
14             console.log(‘value -1‘);
15             changeBy(-1);
16         },
17         value: function () {
18             console.log(‘value is :%s‘, privateCounter);
19             return privateCounter;
20         },
21         num: count
22     }
23 };
24 
25 var Counter1 = Counter();
26 var Counter2 = Counter();
27 console.log(Counter1.value()); // 0 
28 Counter1.increment();
29 Counter1.increment();
30 console.log(Counter1.value()); // 2 
31 console.log(Counter2.value()); // 0 
32 Counter1.decrement();
33 console.log(Counter1.value()); // 1 
34 console.log(Counter2.value()); // 0 

View Code

　　请注意两个计数器 counter1 和 counter2 是如何维护它们各自的独立性的。每个闭包都是引用自己词法作用域内的变量 privateCounter 。
每次调用其中一个计数器时，通过改变这个变量的值，会改变这个闭包的词法环境。然而在一个闭包内对变量的修改，不会影响到另外一个闭包中的变量。

以这种方式使用闭包，提供了许多与面向对象编程相关的好处 —— 特别是数据隐藏和封装。