这是关闭的一个很好的例子吗？

Question

我看到这是 example on MDN，但不明白为什么这是一件好事 (TM)。

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

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

为什么上面比下面好？

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

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

它有什么不同？显然，我错过了重点......

编辑：添加其余代码（完整代码在链接中）

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>  

Answer 1

在这种情况下，size 是封闭的变量。调用makeSizer(12) 返回一个“记住”12 的函数引用。这个函数引用被分配给一个元素上的点击处理程序（参见MDN 示例中的其余代码）。它说：如果您点击我，请致电（执行）size12。在单击时，正文的字体大小变为“12px”，因为从 makeSizer(12) 返回的函数引用被执行（封闭值为 12）。

如果您使用过该功能，您会立即调整字体大小。

function makeSizer(size) {  
        document.body.style.fontSize = size + 'px';  
}
var size12 = makeSizer(12);  
var size14 = makeSizer(14);  
var size16 = makeSizer(16); //=> now the font-size of the body is '16px'

想想当你这样做时在这种情况下会发生什么：

document.getElementById('size-12').onclick = size12; 

如果你点击#size-12会发生什么吗？

您链接到的 MDN 页面链接到 jsfiddle example。试试看！

好或坏是我很乐意留给社区中更虔诚的部分的事情。我会说这个闭包很有用，甚至可能很方便。

Answer 2

它们都不是更好，但它们的行为不同。

在您按如下方式调用返回的函数之前，第一个实际上不会调整大小：

size12();

您的第二个示例首先声明了一个函数，然后调用了 3 次。您立即将大小设置为 12px，然后是 14px，最后是 16px。

Answer 3

你对“好”的标准是什么？

在第一个示例中，您创建了一些必须调用才能完成工作的函数。尺寸是封闭的，很难看到任何好处。您可能想要这样做：

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

var setSmall = makeSizer(8);
var setMedium = makeSizer(10);
var setLarge = makeSizer(14);

或类似的，所以现在你只需调用：

setSmall();

第二种情况的函数应该被称为setSize。

闭包的另一种用法是：

var setSize = (function() {
  var sizes = {small: 8, medium: 10, large: 14};

  return function(size) {

    if (sizes.hasOwnProperty(size)) {
      document.body.style.fontSize = sizes[size] + 'px';
    }
  }
}());

setSize('small');

它们是“好”、“坏”还是其他取决于您对它们进行分类的标准。

Answer 4

在第一个示例中，makeSizer 返回一个函数。在第二个示例中，它不返回任何内容，并且名称具有误导性。两者完全不同。

第一个例子中的推理是makeSizer 是一个函数工厂；它使“sizer”功能。 size12、size14 和 size16 是特定的“sizer”函数，由 makeSizer 制作。如果稍后调用其中之一，它将设置字体大小。

在第二个示例中，您首先将字体大小设置为 12，然后设置为 14，然后设置为 16，并在每个阶段将无意义的返回值保存到变量中。

Answer 5

实际上，您所拥有的不是闭包的示例。

维基百科告诉我们closure 的定义是一个“函数以及该函数的非局部变量的引用环境。”

更简单地说，它是一个“封闭”周围作用域变量的函数。

一个很好的例子是这样的：

public Func<int> ClosureExample()
{
    int a = 1,
        b = 2;

    Func<int> closeIt = () => a + b;
    return closeIt;
}

让我们真正看看这是怎么回事。我们声明两个整数，然后使用 lambda 表达式/闭包/匿名方法（所有这些都是分配给第一类函数泛型的定义的有效名称）返回将用于执行此计算的第一类函数，在其他地方使用封闭的变量。

你可以说 closeIt 包含了整数 a 和 b；这些变量不属于闭包，但它们正在被闭包使用。