javascript闭包学习总结

学习闭包的好文章：
1. 阮一峰： 学习Javascript闭包（Closure）  http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html

留了一个题：

var name = "The Window";
var object = {
	name : "My Object",
	getNameFunc : function() {
		return function(){
			return this.name;
		};
	}
};

能理解答案了吧？

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------

2. mozilla的js guide  https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Working_with_Closures

引用

Emulating private methods with closures

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 */  

看懂这个例子：

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

上面这段JS为什么不能达到预期效果，要改成下面这样才对！

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

引用

This works as expected. Rather than the callbacks all sharing a single environment, the makeHelpCallback function creates a new environment for each one in which help refers to the corresponding string from the helpText array.

利用 let 关键字也可以解决（block level scope）

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

一定要想明白这个例子！

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------

3. Secrets of JavaScript closures   http://www.kryogenix.org/code/browser/secrets-of-javascript-closures/

解释得很详实，还有视频。
ppt下载

http://www.crockford.com/javascript/private.html 这里有关于js private的英文说明
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------



4. 闭包的秘密  http://www.gracecode.com/archives/2385/
对上面那篇英文文章的补充。
修改之后的ppt在box.net下载不下来。

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------

5. 理解 JavaScript 闭包  为之漫笔翻译的 http://www.cn-cuckoo.com/2007/08/01/understand-javascript-closures-72.html
原文在 http://www.jibbering.com/faq/faq_notes/closures.html

这个版本也不错 http://www.cn-cuckoo.com/wordpress/wp-content/uploads/2007/08/JavaScriptClosures.html

另外推荐的另一篇js基础知识的文章也很值得精读 http://www.cnblogs.com/RicCC/archive/2008/02/15/javascript-object-model-execution-model.html