Question

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

（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures）

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

此示例中的代码可以通过单击12,14或16来实现，单词的字体大小可以相应更改。

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)并将执行该undefined函数的返回结果分配给.onclick属性，因此点击它就没有任何作用，因为没有分配任何函数到onclick属性。

使用makeSizer()实施，您可以改为：

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

那会有效。在这里你可以清楚地看到你正在为onclick属性分配一个函数，所以当点击发生时，有一个函数可以调用click事件。

Javascript关闭：MDN中的Pratical Closures示例

1 个答案: