Kane's Blog

实用的闭包

该是抛开理论的时候了 – 但是闭包真的有用吗？让我们思考闭包潜在的用处。闭包让你把一些数据（环境）和可操作数据的函数联系在一起。这一点明显和面向对象程序设式并行不悖，对象可让我们把一些数据（对象的属性）和一个以上的方法联系在一起。

因此，如果通常你会在某个地方使用附有单一方法的对象，你可以在这些地方使用闭包。

视情况你可能会想这样做，这在 Web 上尤其常见。我们写在 Web 上的 JavaScript 代码多半是以事件为基础 – 我们定义了一些行为，然后把这些行为和由使用者所触发的事件（如 click 或 keypress）连系在一起。我们的代码通常被连系为 Callback︰在响应事件时，所执行的单一函数。

这里有个实际的例子︰假如我们希望在页面上加入可以调整页面文字的按钮。以像素为单位，指定 body 元素的 font-size 是一个方法，然后以 em 为单位，设定在页面上（如页眉）的其他元素的大小︰

body {
  font-family: Helvetica, Aria, sans-serif;
  font-size: 12px;
}

h1 {
  font-size: 1.5em;
}
h2 {
  font-size: 1.2em;
}[/code]

我们的交互式文字大小按钮可以改变 body 元素的 font-size 属性，拜相对单位之赐，接着对其他的元素做调整。

JavaScript 代码︰
function makeSizer(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
}

var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);
现在 size12、size14 和 size16 这些函数可分别调整 body 文字的大小为 12、14 和 16 像素。我们可以把代码和按钮（本例中使用的是连结）连系在一起，如下︰
function setupButtons() {
  document.getElementById('size-12').onclick = size12;
  document.getElementById('size-14').onclick = size14;
  document.getElementById('size-16').onclick = size16;
}
<a href="#" id="size-12">12</a>
<a href="#" id="size-14">14</a>
<a href="#" id="size-16">16</a>
 

使用闭包模拟私有的方法

像 Java 这类语言可以把方法宣告为私有的，意思是这些方法只能被同一类别的其他方法所呼叫。

JavaScript 并不提供做这些事的原生方式，但可以使用闭包来模拟私有方法。私有方法不只是对限制代码的存取这方面有用︰同时也是管理你的全局命名空间的强大方式，把非必要的方法堆在公开的界面里。

这里是如何使用闭包来定义可以存取私有函数和变量的公开函数︰

var Counter = (function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  }
})();

alert(Counter.value()); /* 显示 0 */
Counter.increment();
Counter.increment();
alert(Counter.value()); /* 显示 2 */
Counter.decrement();
alert(Counter.value()); /* 显示 1 */

在此完成了很多事。在上一个范例中，每一个闭包都有他自己的环境；此处我们建立了由三个函数所共享的单一环境︰Counter.increment、Counter.decrement、Counter.value。

共享的环境是建立在无名函数的本体内，无名函数一经定义就会开始执行。环境内含两个私有项︰称作 privateCounter 的变量，以及称作 changeBy 的函数。这两个私有项都不能在无名函数外部被直接存取。相对的，必须由三个公开的函数来存取这些私有项，这三个函数是从无名函数的封装器所返回的。

这三个公开的函数共享闭包的同一个环境。感谢 JavaScript 的词汇作用域，这三个函数都能存取 privateCounter 变量和 changeBy 函数。

按照这个方式来运用闭包，可以得到通常是附加在面向对象程序设计里的数据隐藏和封装的好处。

在循环中建立闭包︰常见的错误

在 JavaScript 1.7 引入 let 关键词以前，闭包常见的问题出现在当闭包是在循环内部建立的时候。思考以下的例子︰

<p id="help">这里会显示有用的提示</p>
<p>E-mail: <input type="text" id="email" name="email"></p>
<p>姓名: <input type="text" id="name" name="name"></p>
<p>年龄: <input type="text" id="age" name="age"></p>

function showHelp(help) {
  document.getElementById('help').innerHTML = help;
}

function setupHelp() {
  var helpText = [
      {'id': 'email', 'help': '你的 e-mail 地址'},
      {'id': 'name', 'help': '你的完整姓名'},
      {'id': 'age', 'help': '你的年龄（你必须大于 16 岁）'}
    ];

  for (var i = 0; i < helpText.length; i++) {
    var item = helpText[i];
    document.getElementById(item.id).onfocus = function() {
      showHelp(item.help);
    }
  }
}[/code]

helpText 数组定义了三个有用的提示，每一个都和文件中的输入字段的 ID 连系在一起。循环会在这些定义里巡回一圈，给每一个显示相关连的说明的方法使用 onfocus 事件。

如果你试着执行这个代码，你会发现他并不如预期般的运作。不管你把焦点放在哪一个字段上，都会显示关于你的年龄的讯息。

这其中的原因是代入给 onfocus 的函数是闭包；这些闭包是由函数的定义和从 setupHelp 函数的作用域所捕捉到的环境所组成的。这三个闭包已经建立了，但每一个都共享同一个环境。每次执行 onfocus 的 Callback 的时候，循环执行的是他自己的闭包，以及指向 helpText 列表中的最后一项的变量 item（由三个闭包所共享）。

本例的解决方法是使用更多的闭包︰特别是使用稍早已描述过的函数制造机︰
function showHelp(help) {
  document.getElementById('help').innerHTML = help;
}

function makeHelpCallback(help) {
  return function() {
    showHelp(help);
  };
}

function setupHelp() {
  var helpText = [
      {'id': 'email', 'help': '你的 e-mail 地址'},
      {'id': 'name', 'help': '你的完整姓名'},
      {'id': 'age', 'help': '你的年龄（你必须大于 16 岁）'}
    ];

  for (var i = 0; i &lt; helpText.length; i++) {
    var item = helpText[i];
    document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
  }
}
这次就如预期般运作。而不是所有的 Callback 都共享单一的环境，makeHelpCallback 给每一个 help 建立新的环境，此处的 help 参照了相对应的 helpText 数组的字符串。
如果你使用 JavaScript 1.7 以上的版本，你可以使用 let 关键词建立具有区块层级作用域的变量来解决这个问题︰
for (var i = 0; i &lt; helpText.length; i++) {
    let item = helpText[i];
    document.getElementById(item.id).onfocus = function() {
      showHelp(item.help);
    }
  }
let 关键词使 item 变量改用具有区块层级的作用域来建立，导致 for 循环每一次反复都能建立新的参考。意思是每一个闭包都会捕捉到个别的变量，解决因为共享同一环境所引起的问题。

效能的考虑

如果并没有特定的任务需要用到闭包，且闭包对 Script 的效能会有负面的影响，因此在其他函数的内部里建立不必要的函数是很不智的。

例如，当建立新的对象或类别时，通常应该要把方法和对象的原型连系在一起，而不是在对象的建构子中定义。这其中的理由是，每当呼叫建构子的时候，就要把方法代入（也就是每一个对象正在建立的时候）。

思考以下不切实际的例子︰

function MyObject(name, message) {
  this.name = String(name);
  this.message = String(message);
  this.getName = function() {
    return this.name;
  };

  this.getMessage = function() {
    return this.message;
  };
}

上面的代码并未从闭包的行为中取得好处，应该改用重整过的形式︰

function MyObject(name, message) {
  this.name = String(name);
  this.message = String(message);
}
MyObject.prototype = {
  getName: function() {
    return this.name;
  },
  getMessage: function() {
    return this.message;
  }
};

或者是︰

function MyObject(name, message) {
  this.name = String(name);
  this.message = String(message);
}
MyObject.prototype.getName = function() {
  return this.name;
};
MyObject.prototype.getMessage = function() {
  return this.message;
};