JavaScript 闭包

实用的闭包

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

function makeSizer(size) {
    return function () {
        document.body.style.fontSize = size + 'px';
        console.log(size);
    };
}

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

用闭包模拟私有方法

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

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

var Counter = (function () {
    var privateCounter = 0,count;

    function changeBy(val) {
        privateCounter += val;
        count += val;
    }
    return {
        increment: function () {
            console.log('value +1');
            changeBy(1);
        },
        decrement: function () {
            console.log('value -1');
            changeBy(-1);
        },
        value: function () {
            console.log('value is :%s',privateCounter);
            return privateCounter;
        },
        num:count
    }
})();

var Counter1 = Counter;
var Counter2 = Counter;
console.log(Counter1.value()); // 0 
Counter1.increment();
Counter1.increment();
console.log(Counter1.value()); // 2 
console.log(Counter2.value()); // 2 
Counter1.decrement();
console.log(Counter1.value()); // 1 
console.log(Counter2.value()); // 1 

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

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

var Counter = function () {
    var privateCounter = 0, count;

    function changeBy(val) {
        privateCounter += val;
        count += val;
    }
    return {
        increment: function () {
            console.log('value +1');
            changeBy(1);
        },
        decrement: function () {
            console.log('value -1');
            changeBy(-1);
        },
        value: function () {
            console.log('value is :%s', privateCounter);
            return privateCounter;
        },
        num: count
    }
};

var Counter1 = Counter();
var Counter2 = Counter();
console.log(Counter1.value()); // 0 
Counter1.increment();
Counter1.increment();
console.log(Counter1.value()); // 2 
console.log(Counter2.value()); // 0 
Counter1.decrement();
console.log(Counter1.value()); // 1 
console.log(Counter2.value()); // 0

　　请注意两个计数器 counter1 和 counter2 是如何维护它们各自的独立性的。每个闭包都是引用自己词法作用域内的变量 privateCounter 。

每次调用其中一个计数器时，通过改变这个变量的值，会改变这个闭包的词法环境。然而在一个闭包内对变量的修改，不会影响到另外一个闭包中的变量。

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