快捷導(dǎo)航

JavaScript 變量作用域及閉包

更新時(shí)間：2009年08月07日 22:57:34 作者：

作用域JavaScript 的變量作用域是按照函數(shù)劃分的，為了快速的了解它的特性，我們通過實(shí)例來進(jìn)行演示。

實(shí)例六：

 
<script type="text/javascript"> 
window.onload = function(){ 
var i = 1; 
function test(){ 
alert(i); 
} 
// 彈出內(nèi)容為 1 的提示框 
test(); 
} 
</script> 

分析：
內(nèi)部函數(shù)可以訪問外部函數(shù)的變量，這個(gè)就引出了一個(gè)新的概念，那就是閉包。
閉包
什么是閉包呢，簡(jiǎn)單的說就是一個(gè)函數(shù) A ，它的內(nèi)部函數(shù) B 可以訪問 A 內(nèi)定義的變量，即使函數(shù) A 已經(jīng)終止。下面通過實(shí)例進(jìn)行了解。
實(shí)例七：

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
window.onload = function(){ 
var i = 1; 
window.onunload = function(){ 
alert(i); 
} 
} 
</script> 

分析：
當(dāng)整個(gè)頁面加載完成時(shí)，會(huì)觸發(fā) onload 事件，這個(gè)onload 事件方法里給窗口的onunload 事件注冊(cè)了一個(gè)方法，這個(gè)方法里用到了onload 事件方法里聲明的變量，然后onload 事件方法運(yùn)行結(jié)束，這時(shí)候我們點(diǎn)擊關(guān)閉窗口，會(huì)彈出內(nèi)容為1的提示框，說明onunload 的事件方法成功的調(diào)用了onload 事件方法里聲明的變量。
為了進(jìn)一步了解閉包的特性，看下面的例子
實(shí)例八：

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
function initX(oarg){ 
// 定義一個(gè)變量 
var x = oarg; 
// 定義一個(gè)顯示變量的方法 
var funGet = function(){ 
alert(x); 
} 
// 定義一個(gè)對(duì)變量進(jìn)行修改的方法 
var funSet = function(iarg){ 
x = iarg; 
} 
// 返回這兩個(gè)方法 
return [funGet,funSet]; 
} 
// 運(yùn)行一個(gè)方法實(shí)例，返回值為包含 get 和 set 方法的數(shù)組 
var funArr = initX(1); 
// 得到 get 方法 
var funGet = funArr[0]; 
// 得到 set 方法 
var funSet = funArr[1]; 
// 運(yùn)行 get 方法，顯示initX方法實(shí)例內(nèi)的 x 變量，結(jié)果為 1 
funGet(); 
// 運(yùn)行 set 方法，對(duì)initX方法實(shí)例內(nèi)的 x 變量進(jìn)行賦值 
funSet(2); 
// 運(yùn)行 get 方法，顯示initX方法實(shí)例內(nèi)的 x 變量，結(jié)果為 2 
funGet(); 
</script> 

分析：
當(dāng)內(nèi)部函數(shù)對(duì)外部函數(shù)定義的變量進(jìn)行調(diào)用時(shí)，實(shí)際上引用的是這個(gè)變量的內(nèi)存塊，所以當(dāng)我們調(diào)用內(nèi)部函數(shù)時(shí)，引用的變量值是當(dāng)前這個(gè)變量的實(shí)際內(nèi)容。
閉包功能雖然強(qiáng)大，但是如果不注意，它也會(huì)給我們帶來困擾。看下面的例子。
實(shí)例九：

復(fù)制代碼代碼如下:

 
<button id="main">run</button> 
<script type="text/javascript"> 
(function(){ 
var obj = document.getElementById("main"); 
var funArr = ['onclick','onkeypress']; 
for(var i=0; i<funArr.length; i++){ 
var temp = funArr[i]; 
obj[temp] = function(){ 
alert(temp); 
} 
} 
})(); 
</script> 

寫代碼的原意是給 id 是 main 的按鈕注冊(cè)點(diǎn)擊事件和按鍵事件，事件的內(nèi)容是分別彈出事件名稱的提示框。但是結(jié)果有點(diǎn)匪夷所思，兩個(gè)事件的提示框全是 onkeypress，根據(jù)閉包的原理，我們仔細(xì)分析，就會(huì)發(fā)現(xiàn)當(dāng)兩個(gè)事件方法被調(diào)用時(shí) temp 變量指向的是 funArr[1] 的內(nèi)容，我們可以這樣修改來解決這個(gè)問題：

復(fù)制代碼代碼如下:

 
<button id="main">run</button> 
<script type="text/javascript"> 
(function(){ 
var obj = document.getElementById("main"); 
var funArr = ['onclick','onkeypress']; 
for(var i=0; i<funArr.length; i++){ 
(function(){ 
var temp = funArr[i]; 
obj[temp] = function(){ 
alert(temp); 
} 
})(); 
} 
})(); 
</script> 

把 for 循環(huán)內(nèi)的代碼放入一個(gè)函數(shù)內(nèi)，這樣，每循環(huán)一次都會(huì)產(chǎn)生一個(gè)函數(shù)實(shí)例，讓函數(shù)實(shí)例記錄 funArr 數(shù)組中的每個(gè)值，這樣就避免了上面碰到的問題。

您可能感興趣的文章: