Javascript Closure: Pratical Closures example in MDN

Javascript Closure: Pratical Closures example in MDN

本文关键字：example in MDN Closures Pratical Closure Javascript      更新时间：2023-09-26

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

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

它不行...

你省略了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 属性分配一个函数，因此当单击发生时，有一个函数可以调用单击事件。

相关文章：