Javascript关闭：MDN中的实际关闭示例

因为我不完全理解JavaScript中闭包的功能。 MDN中的实用闭包的例子中有一些疑问。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);

它不工作...

来源

2014-12-04 Jasonson

是的。 'makeSizer'不再返回一个函数，它确实需要。相反，它只是调整字体大小。 – Bergi 2014-12-04 06:43:24

你忽略了的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事件。

来源

2014-12-04 06:44:19 jfriend00

Javascript关闭：MDN中的实际关闭示例

回答

相关问题