1.2變量的作用域
內(nèi)部函數(shù)也可以有自己的變量,這些變量都被限制在內(nèi)部函數(shù)的作用域中:
function outerFn() {
document.write(“Outer function《br/》”);
function innerFn() {
var innerVar = 0;
innerVar++;
document.write(“Inner function\t”);
document.write(“innerVar = ”+innerVar+“《br/》”);
}
return innerFn;
}
var fnRef = outerFn();
fnRef();
fnRef();
var fnRef2 = outerFn();
fnRef2();
fnRef2();
每當(dāng)通過(guò)引用或其它方式調(diào)用這個(gè)內(nèi)部函數(shù)時(shí),就會(huì)創(chuàng)建一個(gè)新的innerVar變量,然后加1,最后顯示
Outer function
Inner function innerVar = 1
Inner function innerVar = 1
Outer function
Inner function innerVar = 1
Inner function innerVar = 1
內(nèi)部函數(shù)也可以像其他函數(shù)一樣引用全局變量:
var globalVar = 0;
function outerFn() {
document.write(“Outer function《br/》”);
function innerFn() {
globalVar++;
document.write(“Inner function\t”);
document.write(“globalVar = ” + globalVar + “《br/》”);
}
return innerFn;
}
var fnRef = outerFn();
fnRef();
fnRef();
var fnRef2 = outerFn();
fnRef2();
fnRef2();
現(xiàn)在每次調(diào)用內(nèi)部函數(shù)都會(huì)持續(xù)地遞增這個(gè)全局變量的值:
Outer function
Inner function globalVar = 1
Inner function globalVar = 2
Outer function
Inner function globalVar = 3
Inner function globalVar = 4
但是如果這個(gè)變量是父函數(shù)的局部變量又會(huì)怎樣呢?因?yàn)閮?nèi)部函數(shù)會(huì)引用到父函數(shù)的作用域(有興趣可以了解一下作用域鏈和活動(dòng)對(duì)象的知識(shí)),內(nèi)部函數(shù)也可以引用到這些變量
function outerFn() {
var outerVar = 0;
document.write(“Outer function《br/》”);
function innerFn() {
outerVar++;
document.write(“Inner function\t”);
document.write(“outerVar = ” + outerVar + “《br/》”);
}
return innerFn;
}
var fnRef = outerFn();
fnRef();
fnRef();
var fnRef2 = outerFn();
fnRef2();
fnRef2();
這一次結(jié)果非常有意思,也許或出乎我們的意料
Outer function
Inner function outerVar = 1
Inner function outerVar = 2
Outer function
Inner function outerVar = 1
Inner function outerVar = 2
我們看到的是前面兩種情況合成的效果,通過(guò)每個(gè)引用調(diào)用innerFn都會(huì)獨(dú)立的遞增outerVar。也就是說(shuō)第二次調(diào)用outerFn沒(méi)有繼續(xù)沿用outerVar的值,而是在第二次函數(shù)調(diào)用的作用域創(chuàng)建并綁定了一個(gè)一個(gè)新的outerVar實(shí)例,兩個(gè)計(jì)數(shù)器完全無(wú)關(guān)。
當(dāng)內(nèi)部函數(shù)在定義它的作用域的外部被引用時(shí),就創(chuàng)建了該內(nèi)部函數(shù)的一個(gè)閉包。這種情況下我們稱既不是內(nèi)部函數(shù)局部變量,也不是其參數(shù)的變量為自由變量,稱外部函數(shù)的調(diào)用環(huán)境為封閉閉包的環(huán)境。從本質(zhì)上講,如果內(nèi)部函數(shù)引用了位于外部函數(shù)中的變量,相當(dāng)于授權(quán)該變量能夠被延遲使用。因此,當(dāng)外部函數(shù)調(diào)用完成后,這些變量的內(nèi)存不會(huì)被釋放(最后的值會(huì)保存),閉包仍然需要使用它們。
3.閉包之間的交互
當(dāng)存在多個(gè)內(nèi)部函數(shù)時(shí),很可能出現(xiàn)意料之外的閉包。我們定義一個(gè)遞增函數(shù),這個(gè)函數(shù)的增量為2
function outerFn() {
var outerVar = 0;
document.write(“Outer function《br/》”);
function innerFn1() {
outerVar++;
document.write(“Inner function 1\t”);
document.write(“outerVar = ” + outerVar + “《br/》”);
}
function innerFn2() {
outerVar += 2;
document.write(“Inner function 2\t”);
document.write(“outerVar = ” + outerVar + “《br/》”);
}
return { “fn1”: innerFn1, “fn2”: innerFn2 };
}
var fnRef = outerFn();
fnRef.fn1();
fnRef.fn2();
fnRef.fn1();
var fnRef2 = outerFn();
fnRef2.fn1();
fnRef2.fn2();
fnRef2.fn1();
我們映射返回兩個(gè)內(nèi)部函數(shù)的引用,可以通過(guò)返回的引用調(diào)用任一個(gè)內(nèi)部函數(shù),結(jié)果:
Outer function
Inner function 1 outerVar = 1
Inner function 2 outerVar = 3
Inner function 1 outerVar = 4
Outer function
Inner function 1 outerVar = 1
Inner function 2 outerVar = 3
Inner function 1 outerVar = 4
innerFn1和innerFn2引用了同一個(gè)局部變量,因此他們共享一個(gè)封閉環(huán)境。當(dāng)innerFn1為outerVar遞增一時(shí),久違innerFn2設(shè)置了outerVar的新的起點(diǎn)值,反之亦然。我們也看到對(duì)outerFn的后續(xù)調(diào)用還會(huì)創(chuàng)建這些閉包的新實(shí)例,同時(shí)也會(huì)創(chuàng)建新的封閉環(huán)境,本質(zhì)上是創(chuàng)建了一個(gè)新對(duì)象,自由變量就是這個(gè)對(duì)象的實(shí)例變量,而閉包就是這個(gè)對(duì)象的實(shí)例方法,而且這些變量也是私有的,因?yàn)椴荒茉诜庋b它們的作用域外部直接引用這些變量,從而確保了了面向?qū)ο髷?shù)據(jù)的專有性。
3.解惑
現(xiàn)在我們可以回頭看看開頭寫的例子就很容易明白為什么第一種寫法每次都會(huì)alert 4了。
for (var i = 0; i 《 spans.length; i++) {
spans[i].onclick = function() {
alert(i);
}
}
上面代碼在頁(yè)面加載后就會(huì)執(zhí)行,當(dāng)i的值為4的時(shí)候,判斷條件不成立,for循環(huán)執(zhí)行完畢,但是因?yàn)槊總€(gè)span的onclick方法這時(shí)候?yàn)閮?nèi)部函數(shù),所以i被閉包引用,內(nèi)存不能被銷毀,i的值會(huì)一直保持4,直到程序改變它或者所有的onclick函數(shù)銷毀(主動(dòng)把函數(shù)賦為null或者頁(yè)面卸載)時(shí)才會(huì)被回收。這樣每次我們點(diǎn)擊span的時(shí)候,onclick函數(shù)會(huì)查找i的值(作用域鏈?zhǔn)且梅绞剑?,一查等?,然后就alert給我們了。而第二種方式是使用了一個(gè)立即執(zhí)行的函數(shù)又創(chuàng)建了一層閉包,函數(shù)聲明放在括號(hào)內(nèi)就變成了表達(dá)式,后面再加上括號(hào)括號(hào)就是調(diào)用了,這時(shí)候把i當(dāng)參數(shù)傳入,函數(shù)立即執(zhí)行,num保存每次i的值。
一、什么是閉包?“官方”的解釋是:所謂“閉包”,指的是一個(gè)擁有許多變量和綁定了這些變量的環(huán)境的表達(dá)式(通常是一個(gè)函數(shù)),因而這些變量也是該表達(dá)式的一部分。相信很少有人能直接看懂這句話,因?yàn)樗枋龅奶珜W(xué)術(shù)。我想用如何在Javascript中創(chuàng)建一個(gè)閉包來(lái)告訴你什么是閉包,因?yàn)樘^(guò)閉包的創(chuàng)建過(guò)程直接理解閉包的定義是非常困難的??聪旅孢@段代碼: function a(){ var i=0; function b(){ alert(++i); } return b;}var c = a();c();
評(píng)論
查看更多