Javascript中的作用域（scope）

2024-07-21 02:14:02

字體：大中小

來源：轉載

供稿：網友

事前準備

學習本教程的最佳方法是隨手準備好Firefox中的工具Firebug。這樣使得您可以即刻測試教程的例子。如果機子上還沒有FireFox和FireBug，就應該盡快安裝一套來用。

定義

作用域scope
1.（名詞）某樣事物執行、操作、擁有控制權的那么一個區域 [1]
2. （名詞）編寫程序時，程序之中變量的可見度；例如，一個函數能否使用另外一個函數所創建的變量。[2]

可是這能夠說明什么問題呢？每當有人在說“這是作用域的問題”或“作用域搞錯了”的時候，那就是說某個函數運行起來的時候，找不到正確變量的位置。這樣我們便知道應該從哪一方面入手，查找出問題所在。

正式開始

實際上每一個你定義的函數都是某個對象的方法。甚至是這樣的寫法：

function fn() { 

alert(11); 

}

老兄你不是故弄玄虛吧～。做一個這樣的演示可真得是簡單得要命。沒錯！本例不需要任何Javascript文件，服務器或html。你只要打開 firefox，彈出firebug,點擊console tab。在Firefox狀態欄上面看到有>>>提示的地方就可以輸入了。

輸入：
function fn() { alert(11); };

然后回車。一切安然...你剛才做的實際上是定義了一個函數fn。接著試試：

fn();

然后回車。得到11的警告窗口？還不錯吧？接著試試：

window.fn(); 

this.fn();

得到一樣的結果吧？這是因為函數fn是window對象的一個方法，在第二行的"this"的作用域實際指向了windows對象。不過多數情況中你不需要像這樣window.myFunction(...)地調用函數，這樣太麻煩了，程序員工作起來會很不方便。

window對象

window 對象總是存在的，你可理解其為一個瀏覽器窗口對象。它包含了其它所有的對象如document 和所有的全局變量。

你可以打開Firebug，切換到 Script 頁面并在Firebug右側的New watch expression... 里面輸入 window。觀察window對象究竟有什么在里面。

接著，嘗試找出我們之前定義過的fn函數。

另外，每個frame或iframe擁有其自身的window對象，其自身的全局空間。

理解作用域

接下的內容開始有點復雜了。切換到Firebug Console標簽頁然后輸入：

var o1 = {testvar:22, fun:function() { alert('o1: ' this.testvar); }}; 

var o2 = {testvar:33, fun:function() { alert('o2: ' this.testvar); }};

結果是什么？你聲明了o1 和 o2兩個對象，分別都有一些屬性和方法，但值不同。

接著試試：

fun(); 

window.fun(); 

this.fun();

出錯了，是吧？因為window對象（等價于this）并沒有fun的方法。試一試下面的：

o1.fun(); 

o2.fun();

22和33出來了？非常好！

接下來這部分的內容最復雜啦?；谶@個原始的函數，如果對象的數量多的話，你必須為每個對象加上這個函數－明顯是重復勞動了。這樣說吧，o1.fun寫得非常清晰的而且為了搞掂它已經占用了我一個星期的開發時間。想象一下代碼到處散布著this變量，怎么能不頭疼？如果要將調用（執行）的o1.fun方法但this會執行o2,應該怎么實現呢？試一試下面的：

o1.fun.call(o2);

明白了嗎？當執行o1的fun方法時你強行將變量this指向到o2這個對象，換句話說，更加嚴謹地說:o1.fun的方法在對象o2的作用域下運行。

當運行一個函數，一個對象的方法時，你可將作用域當作this值的變量。

變量的可見度

變量的可見度和作用域的關系非常密切。我們已經了解到，可在任何對象的外部，聲明變量，或在全局的函數（函數也是變量的一種）也可以，更嚴格說，它們是全局對象window的屬性。 全局變量在任何地方都可見；無論函數的內部還是外部。如果你在某一個函數內修改了一個全局變量，其它函數也會得知這個值是修改過的。

對象可以有它自己的屬性（像上面的testvar）,這些屬性允許從內部或是外部均是可見的。試：

alert(o1.testvar); // 從外部訪問o1的屬性testvar

從內部訪問的演示可在兩個測試對象的fun方法找到。

用關鍵字var在內部聲明，相當于聲明局部變量（局部聲明也是在一條鏈上，即Scope Chain 作用域鏈上,Frank注）：

i = 44; 

function fn2() { 

var i = 55; 

alert(i); 

} 

fn2();

將得到什么？對了，55。聲明在函數fn2的變量i是一個本地變量（局部變量），和等于44的全局變量i 44沒什么關系。 But:

alert(i);

這會訪問全局變量i，顯示44。

希望本文能幫助讀者徹底理解作用域變量可見性的含義。