Закрытие Javascript: пример Pratical Closures в MDN

Question

Так как я не совсем понимаю функциональность замыканий в 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); 

Это не работает ...

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.