快捷導航

JavaScript 變量作用域及閉包

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

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

實例六：

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

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

復制代碼代碼如下:

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

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

復制代碼代碼如下:

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

分析：
當內(nèi)部函數(shù)對外部函數(shù)定義的變量進行調(diào)用時，實際上引用的是這個變量的內(nèi)存塊，所以當我們調(diào)用內(nèi)部函數(shù)時，引用的變量值是當前這個變量的實際內(nèi)容。
閉包功能雖然強大，但是如果不注意，它也會給我們帶來困擾?？聪旅娴睦印?
實例九：

復制代碼代碼如下:

 
<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 的按鈕注冊點擊事件和按鍵事件，事件的內(nèi)容是分別彈出事件名稱的提示框。但是結(jié)果有點匪夷所思，兩個事件的提示框全是 onkeypress，根據(jù)閉包的原理，我們仔細分析，就會發(fā)現(xiàn)當兩個事件方法被調(diào)用時 temp 變量指向的是 funArr[1] 的內(nèi)容，我們可以這樣修改來解決這個問題：

復制代碼代碼如下:

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