阮一峰的博客:http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html
創(chuàng)建匿名函數(shù)并立即執(zhí)行
理論上講,創(chuàng)建一個(gè)匿名函數(shù)并立刻執(zhí)行可以這么寫(xiě):
function (x) { return x * x;}(3); // 9
由于JavaScript語(yǔ)法解析的問(wèn)題坐榆,會(huì)報(bào)SyntaxError錯(cuò)誤解总,因此需要用括號(hào)把整個(gè)函數(shù)定義括起來(lái):
(function (x) { return x * x }) (3); //9
高階函數(shù)
一個(gè)函數(shù)就可以接收另一個(gè)函數(shù)作為參數(shù),這種函數(shù)就稱之為高階函數(shù)挨厚。如map
, reduce
,sort
,filter
。通常情況下,求和的函數(shù)是這樣定義的
var arr = [1, 2, 3, 4, 5];
function sum(arr){
return arr.reduce(function(x,y){
return x+y;
})
}
sum(arr);
console.log(sum(arr)); // 15
函數(shù)作為返回值
高階函數(shù)除了可以接受函數(shù)作為參數(shù)外芬首,還可以把函數(shù)作為結(jié)果值返回悦即。某些時(shí)候我們不想立刻求結(jié)果吮成,而是后面根據(jù)需要再求怎么辦?可以不返回求和的結(jié)果盐欺,而是返回求和的函數(shù)赁豆!
function sum(arr){
return function(){
return arr.reduce(function(x,y){
return x+y;
})
}
}
sum(arr)(); //15
console.log(sum(arr)());
實(shí)際上,我們就是在原來(lái)立刻返回結(jié)果的語(yǔ)句的外層又套了一層匿名函數(shù)并作為返回值冗美,這樣sum返回的是這個(gè)匿名函數(shù)魔种,當(dāng)再次調(diào)用這個(gè)匿名函數(shù)的時(shí)候,才是返回剛才想立刻返回的結(jié)果粉洼。我們也可以把這個(gè)匿名函數(shù)賦給一個(gè)變量來(lái)實(shí)現(xiàn)
function sum(arr){
var result = function(){
return arr.reduce(function(x,y){
return x+y;
})
}
return result;
}
sum(arr)(); //15
## 閉包
在上面例子中节预,我們?cè)诤瘮?shù)`sum`中又定義了函數(shù)result,并且属韧,內(nèi)部函數(shù)result可以引用外部函數(shù)sum
的參數(shù)和局部變量安拟,當(dāng)sum返回函數(shù)result時(shí),相關(guān)參數(shù)和變量都保存在返回的函數(shù)中宵喂,這中程序結(jié)構(gòu)就稱為**閉包(Closure)**糠赦。
function count() {
var arr = [];
for (var i=1; i<=3; i++) {
arr.push(function () {
return i * i;
});
}
return arr;
}
var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];
f1(); // 16
f2(); // 16
f3(); // 16
**返回閉包時(shí)牢記的一點(diǎn)就是:返回函數(shù)不要引用任何循環(huán)變量,或者后續(xù)會(huì)發(fā)生變化的變量锅棕。**
如果一定要引用循環(huán)變量怎么辦拙泽?方法是**再套一層匿名函數(shù)并立即執(zhí)行,用該函數(shù)的參數(shù)綁定循環(huán)變量當(dāng)前的值裸燎,無(wú)論該循環(huán)變量后續(xù)如何更改顾瞻,已綁定到函數(shù)參數(shù)的值不變**:
//方法是再創(chuàng)建一個(gè)函數(shù),用該函數(shù)的參數(shù)綁定循環(huán)變量當(dāng)前的值德绿,
//無(wú)論該循環(huán)變量后續(xù)如何更改荷荤,已綁定到函數(shù)參數(shù)的值不變:
function count() {
var arr = [];
for (var i=1; i<=3; i++) {
arr.push((function (n) {
return function(){
return n*n
}
})(i));
}
return arr;
}
var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];
console.log(f1()) //1
console.log(f2()) //4
console.log(f3()) //9
這里外層套了一層匿名函數(shù),立即執(zhí)行則相當(dāng)于又把這層函數(shù)給抵消了移稳,那么push的仍然是像我們?cè)谠瓉?lái)那個(gè)函數(shù)中push的函數(shù)蕴纳,只不過(guò)這時(shí)push的那些函數(shù)的參數(shù)是我們創(chuàng)建的匿名函數(shù)帶來(lái)的參數(shù)了。
我們這個(gè)立即執(zhí)行的匿名函數(shù)就好像在原來(lái)的for循環(huán)和push的function之間加入了一層作用域个粱,這個(gè)作用域變成了function () { return i \\* i; }的爹古毛,使得里面的function () { return i * i; }的變量要先去找爹,再去找爺爺几蜻,爹中有參數(shù)喇潘,就不去找爺爺了?体斩。
再來(lái)個(gè)例子鞏固一下:
實(shí)現(xiàn)函數(shù) makeClosures,調(diào)用之后滿足如下條件:
1颖低、返回一個(gè)函數(shù)數(shù)組 result絮吵,長(zhǎng)度與 arr 相同
2、運(yùn)行 result 中第 i 個(gè)函數(shù)忱屑,即 `result[i]()`蹬敲,結(jié)果與 `fn(arr[i])` 相同
var arr = [1, 2, 3, 4, 5];
var square = function (x) { return x * x; };
function makeClosures(arr, fn) {
var result = [];
for(var i = 0; i < arr.length; i++){
}
return result;
}
var funcs = makeClosures(arr, square);
console.log(funcs1); // answer: 4
首先我們肯定是要在for循環(huán)中添加內(nèi)容。嘗試1:
for(var i = 0; i < arr.length; i++){
result.push(fn(arr[i]));
}
這肯定是不對(duì)的莺戒,因?yàn)椴环项}目要求伴嗡,人家要返回函數(shù)啊,你這樣直接result中存儲(chǔ)的都是值了从铲,還怎么能調(diào)用呢瘪校?雖然值是變了的,那是因?yàn)閒n(arr[i])立即執(zhí)行了(fn已經(jīng)是寫(xiě)好的函數(shù)square了)名段。
那好吧阱扬,那我們外面加一層函數(shù),然后把這個(gè)值通過(guò)這個(gè)函數(shù)返回不就得了么伸辟。嘗試2:
for(var i = 0; i < arr.length; i++){
var tmp = arr[i]
result.push(function(){
return fn(tmp);
});
);
}
var funcs = makeClosures(arr, square);
// console.log(funcs)
console.log(funcs0); //25
console.log(funcs1); //25
console.log(funcs2); //25
這里就犯了和上面sum的例子的同樣的錯(cuò)誤麻惶,因?yàn)楫?dāng)我需要調(diào)用的時(shí)候,我的i循環(huán)變量已經(jīng)結(jié)束循環(huán)信夫,此時(shí)i=5, 所以輸出的都是25了窃蹋。
疑問(wèn):不寫(xiě)`var tmp = arr[i]`直接寫(xiě)成`return fn(arr[i])`為什么不行?静稻?警没??
解決方法同理姊扔,就是再套一層函數(shù)惠奸,綁定參數(shù)梅誓,然后立即執(zhí)行恰梢。這樣就把作用域給變了。嘗試3:
for(var i = 0; i < arr.length; i++){
result.push((function(e){
return function(){
return fn(e);
}
})(arr[i]))
}
var funcs = makeClosures(arr, square);
// console.log(funcs)
console.log(funcs0);
console.log(funcs1);
console.log(funcs2);
這樣就搞定了梗掰。嵌言。。
## 關(guān)于作用域
Q1:全局變量會(huì)綁定到window上及穗,不同的JavaScript文件如果使用了相同的全局變量摧茴,或者定義了相同名字的頂層函數(shù),都會(huì)造成命名沖突埂陆,并且很難被發(fā)現(xiàn)苛白。這與模塊的區(qū)別娃豹??购裙?
## 關(guān)于參數(shù)的作用域懂版?