JavaScript 闭包 : Pratical Closures example in MDN

Question

因为我不完全理解 JavaScript 中闭包的功能。我对 MDN 中 Practical Closures 的例子有一些疑问。

( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures )

我尝试修改MDN给出的代码，但不起作用。我不知道为什么。

这个例子中的代码可以做的是，通过点击12、14或16，单词的字体大小可以相应改变。

以下是原始源代码和链接: http://jsfiddle.net/vnkuZ/

HTML:

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

<a href="#" id="size-12">12</a>
<a href="#" id="size-14">14</a>
<a href="#" id="size-16">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(size) {
  return function() {
    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;

我刚刚修改了JavaScript部分:

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 = makeSizer(12);
document.getElementById('size-14').onclick = makeSizer(14);
document.getElementById('size-16').onclick = makeSizer(16);

这不起作用...

Answer 1

您遗漏了 makeSizer() 的重要部分，即 return function() {...}。您必须拥有该部分并且只能在该内部函数内进行修改。

如果要按原样分配，则必须是这样的:

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

从makeSizer()返回的内部函数对于它的使用方式至关重要，并且是创建保留要使用的size值的闭包的函数稍后，当 click 事件触发时，会将函数分配给 onclick 处理程序，而不是立即执行该函数。这些都是非常重要的区别，也是 MDN 页面的全部要点。

以下是分步说明:

onclick 属性需要为其分配一个函数。您的 makeSizer() 版本不会返回任何内容(这意味着它返回 undefined)，因此当您执行以下操作时:

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

它将立即执行 makeSizer(12) 并将执行该函数的返回结果分配给 .onclick 属性，该结果将是 undefined因此单击它不会执行任何操作，因为没有为 onclick 属性分配任何函数。

通过您的 makeSizer() 实现，您可以这样做:

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

那会起作用的。在这里，您可以清楚地看到您将向 onclick 属性分配一个函数，以便当单击发生时，有一个函数可以调用单击事件。