关于explaining JavaScript closures to six-year olds的问题很大。

该问题提供了许多非常有用的答案。答案之一是指向Closures at the Mozilla Developer Network JavaScript guide的条目,它的确提供了简洁明了的解释(特别是闭包存储了函数及其环境)。

但是,“实际关闭”下的MDN条目让我感到困惑……具体来说,在示例中需要关闭以重新设置文本大小吗?有人可以为我澄清为什么需要关闭makeSizer函数吗?

作为一个初学者程序员,我只能假设我的不使用闭包的替代方法(如下所示)是天真的和不正确的(尽管看起来更简洁有效)?

我对MDN条目显示为文本大小关闭的理由特别感兴趣:


  在其他功能中不必要地创建功能是不明智的
  如果特定任务不需要关闭,则它将关闭
  在处理速度方面都负面影响脚本性能
  和内存消耗。


没有关闭的版本:

HTML(从MDN原始文件修改)

<p>Some paragraph text</p>
<h1>some heading 1 text</h1>
<h2>some heading 2 text</h2>

<a href="#" class="sizer">12</a>
<a href="#" class="sizer">14</a>
<a href="#" class="sizer">16</a>


CSS(未修改)

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

h1 {
  font-size: 1.5em;
}
h2 {
  font-size: 1.2em;
}


JavaScript(已修改)

(function makeSizer() {
   var sizers = document.getElementsByClassName('sizer');
    for (var i = 0; i < sizers.length; i++) {
        sizers[i].onclick = function () {document.body.style.fontSize = this.innerHTML + "px";};
    }; // close for...
})(); // close makeSizer;


JSFiddle (alternative to the original from MDN)

Original from MDN

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

var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);

最佳答案

它主要用于防止对象污染全局空间。在关闭中,可以使变量成为局部变量,并使内部“实现”详细信息成为可能。闭包的主要好处实际上是能够创建私有范围。

这里提出的性能参数实际上与该级别的微优化有关,而不是实际问题。

07-24 16:56