JavaScript 闭包 : MDN Practical Closures

Question

有一个关于 explaining JavaScript closures to six-year olds 的很棒的 stackoverflow 问题.

这个问题有许多非常有用的答案。答案之一涉及 Closures at the Mozilla Developer Network JavaScript guide 的条目，它确实提供了一个简洁且易于理解的解释(具体来说，闭包存储一个函数及其环境)。

但是，实用闭包下的 MDN 条目让我感到困惑......具体来说，在他们的示例中哪里需要闭包来调整文本大小？有人可以帮我解释一下为什么他们需要关闭 makeSizer 函数吗？

作为一名初学者程序员，我只能假设我的不使用闭包的替代方案(如下所示)在某种程度上是幼稚且不正确的(尽管看起来更简洁和高效)？

我对文本大小关闭的理由特别感兴趣，MDN 条目如下:

It is unwise to unnecessarily create functions within other functionsif closures are not needed for a particular task, as it willnegatively affect script performance both in terms of processing speedand memory consumption.

没有关闭的版本:

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);

Answer 1

它主要用于防止对象污染全局空间。在闭包中，您可以将变量设置为本地变量和内部“实现”细节。闭包的主要好处实际上是能够创建私有(private)范围。

这里提出的性能论点确实与这个级别的微观优化有关，而不是一个实际问题。