javascript闭包

在网上查看javascript闭包相关资料，看例子看得懂，感觉明白了，不看的时候又有点模糊，应该属于懵懵懂懂的。

特此将网上几个例子记下，方便以后回顾！

example 01：

function makeFunc() {
var name = "Mozilla";
function displayName() {
alert(name);
}
return displayName;
}

var myFunc = makeFunc();
myFunc();

example 02：为add5和add10分别返回一个方法，返回方法中的x指向外层方法的x,x为两个方法共享，均可修改！

function makeAdder(x) {
return function(y) {
return x + y;
};
}

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2));  // 7
console.log(add10(2)); // 12

example 03：与例02一样，返回的方法均可操控外层方法参数。但是不同实例中不能相互影响修改，闭包返回的方法只针对同一实例（可理解为java中new）

var counter = (function() {
var privateCounter = 0;
function changeBy(val) {
privateCounter += val;
}
return {
increment: function() {
changeBy(1);
},
decrement: function() {
changeBy(-1);
},
value: function() {
return privateCounter;
}
};
})();

alert(counter.value()); /* Alerts 0 */
counter.increment();
counter.increment();
alert(counter.value()); /* Alerts 2 */
counter.decrement();
alert(counter.value()); /* Alerts 1 */

var makeCounter = function() {
var privateCounter = 0;
function changeBy(val) {
privateCounter += val;
}
return {
increment: function() {
changeBy(1);
},
decrement: function() {
changeBy(-1);
},
value: function() {
return privateCounter;
}
}
};

var counter1 = makeCounter();
var counter2 = makeCounter();
alert(counter1.value()); /* Alerts 0 */
counter1.increment();
counter1.increment();
alert(counter1.value()); /* Alerts 2 */
counter1.decrement();
alert(counter1.value()); /* Alerts 1 */
alert(counter2.value()); /* Alerts 0 */

example：04 为每个p标签添加事件，此时并没有立即执行此方法，只是指向方法。因此循环完后，item为最后一个，所有方法都访问它，因此都是最后一个；另外事件方法立即执行，则每个help都会出现一遍，最后还是最后一个！

<p id="help">Helpful notes will appear here</p>
<p>E-mail: <input type="text" id="email" name="email"></p>
<p>Name: <input type="text" id="name" name="name"></p>
<p>Age: <input type="text" id="age" name="age"></p>

function showHelp(help) {
document.getElementById('help').innerHTML = help;
}

function setupHelp() {
var helpText = [
{'id': 'email', 'help': 'Your e-mail address'},
{'id': 'name', 'help': 'Your full name'},
{'id': 'age', 'help': 'Your age (you must be over 16)'}
];

for (var i = 0; i < helpText.length; i++) {
var item = helpText[i];
document.getElementById(item.id).onfocus = function() {
showHelp(item.help);
}
}
}

setupHelp();

为事件添加闭包，循环了三次，返回了三个方法。使用闭包，则上一级的makeHelpCallback(help)资源不会被关闭，因此每个方法都可以向上找到自己的help；上面没有使用闭包，所以造成每个help都是循环完后的help，也就是最后一个；立即执行了事件方法，方法执行完，资源关闭。当触发事件是再去调用方法，根据引用去找方法，但此时的help就是最后一个了

function showHelp(help) {
document.getElementById('help').innerHTML = help;
}

function makeHelpCallback(help) {
return function() {
showHelp(help);
};
}

function setupHelp() {
var helpText = [
{'id': 'email', 'help': 'Your e-mail address'},
{'id': 'name', 'help': 'Your full name'},
{'id': 'age', 'help': 'Your age (you must be over 16)'}
];

for (var i = 0; i < helpText.length; i++) {
var item = helpText[i];
document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
}
}

setupHelp();

参考：Javascript Closures