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中的實際關閉示例

回答

相關問題