雖然前面寫過一篇文章說閉包JavaScript模塊化和閉包棠笑，但是一位美女程序員朋友討論的時候好像并不能理解那邊文章中C代碼和Javascript代碼的區(qū)別，因?yàn)樗遣]有學(xué)過C，所以我覺得還是單純的從JavaScript的角度來討論一下閉包，如果有什么不對的地方环壤，歡迎大家指教。
如果知道下面兩段代碼運(yùn)行結(jié)果的人竹观，可以不看此文镐捧。
例子1
var x = 10;
function fn(){
console.log(x);
}
function show(f){
var x=20;
(function(){
f();
})();
}
show(fn);
//輸出10
例子2
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);
}
}
自由變量
我們先看看MDN上對閉包的定義。
Closures are functions that refer to independent (free) variables. In other words, the function defined in the closure 'remembers' the environment in which it was created.
這里有個地方比較讓人讀不懂：
閉包是指函數(shù)有自由獨(dú)立的變量臭增。什么叫自由獨(dú)立的變量啊，這句話真讓人費(fèi)解竹习。
想弄清楚誊抛，我們看一個例子。
function f(x) {
function g() {
return x;
}
return g;
}
//Tell f to create a new g
var g5 = f(5);
//g5 is a function that always returns 5
alert(g5());
//Tell f to create another new g
var g1 = f(1);
//g1 is a function that always returns 1
alert(g1());
g5和g1是兩個不同的函數(shù)整陌，他們碰巧有相同的代碼拗窃，但是他們在不同的環(huán)境中執(zhí)行，有不同的自由變量泌辫。對上面的自由變量的解釋：
如果一個作用域A被另一個作用域B包括随夸，那么在B作用域中定義的變量在A中就是自由的（拗口）。
上面的例子中震放，
- x在g作用域中就是自由的宾毒，所以g可以使用他，因?yàn)閤是在f作用域中定義的殿遂，f的作用域包括了g的作用域诈铛。
- 全局變量在f作用域和g作用域都是自由的乙各。
- 相反x在f以外就不可見，顯然顯的“不自由”了幢竹。耳峦。。這大概就是自由的含義吧焕毫。蹲坷。。
- 真正的自由變量理解可以看看這個文章Free_variables_and_bound_variables
In computer programming, the term free variable refers to variables used in a function that are neither local variables nor parameters of that function.[1]
The term non-local variableis often a synonym in this context.
不是本地變量＋不是參數(shù)＝》自由變量
作用域鏈
不管什么時候訪問一個變量邑飒，js解析器就在當(dāng)前scope中找它循签，如果變量在當(dāng)前作用域沒有定義，解析起就在包括當(dāng)前作用域的更大的作用域中查找幸乒，一直到全局作用域還沒找到懦底，拋出ReferenceError。這種行為像不像鏈條呢罕扎，這個鏈條就叫作用域鏈聚唐，不清楚的朋友可以復(fù)習(xí)一下JavaScript模塊化和閉包這篇文章。
閉包定義
所以對定義的解釋可以理解為
- 閉包是引用到上層作用域的自由變量的那個函數(shù)對象腔召，換句話說如果一個函數(shù)引用到自由變量了杆查，可以說這個函數(shù)對象是閉包；
- 不過英文定義的第二句說：定義這個函數(shù)的環(huán)境（上下文）是閉包（In other words, the function defined in the closure 'remembers' the environment in which it was created.）臀蛛，
- 總之亲桦，MDN的英文定義就說的這個意思，我覺得還是不清晰的定義浊仆，兩句話客峭，一個說函數(shù)在一定情況下是閉包，一個說是定義函數(shù)的環(huán)境是閉包抡柿。如果有高人可以留言解釋一下到底哪個是定義舔琅，反正我認(rèn)為閉包是引用到上層作用域的自由變量的那個函數(shù)對象算是定義吧。
父作用域是哪個作用域啊
看到下面代碼很吃驚的朋友可能不知道靜態(tài)作用域是何物洲劣”蛤荆看看定義吧Scope_(computer_science)
In languages with lexical scope (also called static scope), name resolution depends on the location in the source code and the lexical context, which is defined by where the named variable or function is defined. 名稱查找依賴于定義位置。
這個父作用域指的是函數(shù)聲明的那個作用域囱稽。不是調(diào)用函數(shù)的地方郊尝。所以上面代碼輸出為10。
循環(huán)中創(chuàng)建閉包
另外战惊，美女程序員還對在循環(huán)中創(chuàng)建閉包不是很理解流昏。
我們看看這個例子
<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();
這個例子中，item在onfocus指向的函數(shù)中是自由的，但是onfocus是有很多個的横缔，指向的函數(shù)也是定義個很多次铺遂，但是item卻始終是父作用域中的那個item，所以所有的onfocus中的item都是同一個茎刚。
在看看怎么修復(fù)：
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();
現(xiàn)在在中間加了一層makeHelpCallback襟锐，在makeHelpCallback中，help在return的匿名函數(shù)中是自由變量膛锭，makeHelpCallback被調(diào)用很多次粮坞，產(chǎn)生了多個不同的help，showHelp中記住的是外部不同的help變量初狰，但是makeHelpCallback中記住的外部變量item.help始終是一個逼肯。
雖然閉包的概念可謂很基礎(chǔ)嬉探，但是卻又是很關(guān)鍵，想了解語言設(shè)計(jì)方面的知識可以看看這些文章（打不開請開vpn）：
First-class function
想知道JS為啥牛逼可以看這個
why-javascript-is-awesome
