解析關於JavaScript作用域的問題

每個寫過程式的人都不會對作用域這個概念陌生，那在這篇文章中就來談下Javascript的作用域。

 在Javascript，全域環境本身就是一個物件。在瀏覽器宿主中這個物件是window，而當Javascript用於其它非瀏覽器的宿主，如嵌入式的環境中，可能會是其它的物件。

 在這裡也修正一個觀念，有很多人都認為Javascript只在瀏覽器中使用，其實Javascript也能在很多非Web情況下使用，據介紹Javascript在一些基於嵌入式的應用領域表現得也很出色，當然這些我也只是聽過傳說而已。

 言歸正傳，當我們寫下：var i=1時，其實就是宣告了一個window作用域的一個變數。

 而當我們寫下i=1時，是宣告了一個window的屬性。

 看这样一段代码：
  [code=javascript">
<script type="text/javascript">
var a = "hello";
b = "world";
Test();
function Test() 
{
alert(a + " " + b);
var a = "welcome";
b = "china";
alert(a + " " + b);
}
alert(a + " " + b);
</script>  
function runCode(id) {
obj = document.getElementById(id); 
var TestWin=open(&#39;&#39;); //打开一个窗口并赋给变量TestWin。 
TestWin.opener = null // 防止代码对论谈页面修改 
TestWin.document.write(obj.value); //向这个打开的窗口中写入代码code，这样就实现了运行代码功能。 
TestWin.document.close(); 
} 
var a = "hello";
b = "world";
Test();
function Test() 
{
alert(a + " " + b);
var a = "welcome";
b = "china";
alert(a + " " + b);
}
alert(a + " " + b);

 這段程式碼分別輸出的結果是：undefined world，welcome china, hello china.

 我們來分別解釋：

 在上文中，我們說過，在Javascript預編譯時，會把所有var變數創建，預設值為undefined，我們在這裡可以舉個例子：

 我們可以寫這樣一段程式碼：

#

<script type="text/javascript">
alert(a);
alert(b);
var a = "111";
        b = "111";
</script>  [/code]
    alert(a);  
    alert(b);  
    var a = "111";  
        b = "111";

 當我們執行執行這段腳本時，可以發現，先彈出undefined，然後回提示腳本錯誤，提示b不存在。由此就可以表明，a在預先編譯的過程中就已經被創建並且初始化為undefined，而b卻只能在實際運行時按順序去解釋。其實在預編譯後的Javascript程式碼可以近乎理解如下：

<script type="text/javascript">
var a = undefined;
alert(a);
alert(b);
a = "111";
b = "111";
</script>

 接下來我們可以談一下函數的作用域問題，每當程式碼執行進入一個函數時，Javascript引擎就會自動建立一個新的作用域，然後把這個新作用域當作目前作用域的子作用域，然後把目前的程式碼作用域切換到這個新作用域。當程式碼退出函數時，這個作用域銷毀，把程式碼作用域交還給他的父作用域。

 好，準備工作差不多了，接下來我們就來解釋第一個問題：問什麼會輸出undefined world。

 首先程式碼進行在預先編譯，當進入 Test方法時，開啟一個新作用域，然後把全域作用域當作他的父作用域。然後對Test內的方法進行預編譯，和上面的程式碼一樣，Test方法被預編譯後方法體大致如下：

function Test() {
    var a = undefined;
    alert(a + " " + b);
    var a = "welcome";
    b = "china";
    alert(a + " " + b);
}

 當然，在目前作用域下無法找到b ，於是他就會到他的父作用域下，也就是全域作用域找到了b=「world」。於是也就產生了這樣的結果。

 第二次彈出welcome china，沒什麼好說的。

 第三次，彈出hello china。我們可以這樣理解，var a 只是 方法Test的一個局部變量，而b由於事先未聲明，因此他會去父作用域中去找到對應的定義。

 好，接下來，我們再看一下這個方法的若干個變體。

<script type="text/javascript">
var a = "hello";
        b = "world";
Test();
function Test() 
{
alert(a + " " + b);
a = "welcome";
b = "china";
alert(a + " " + b);
}
alert(a + " " + b);
</script>

 首先，我們將方法體內的var a改成a，我們先不看答案，直接來分析，首先，在預編譯階段，方法體內幾乎沒有任何改變，因此此時a和b一樣，都要去他們的父作用域中去尋找，因此第一次出的結果應該是hello world，第二次沒什麼說的：welcome china，第三次由於a和b在本作用域內都沒有事先定義，因此都是再改變父作用域內的值，因此應該輸出welcome china.

 我們繼續：

<script type="text/javascript">
var a = "hello";
        b = "world";
Test();
function Test() 
{
alert(a + " " + b);
var a = "welcome";
var b = "china";
alert(a + " " + b);
}
alert(a + " " + b);
</script>

 和上面的分析一樣，應該輸出undefined undefined，welcome china，hello world.

<script type="text/javascript">
a = "hello";
b = "world";
Test();
function Test() 
{
alert(a + " " + b);
var a = "welcome";
b = "china";
alert(a + " " + b);
}
alert(a + " " + b);
</script>

 應該是undefined china,welcome china,hello china.

 經試驗，都沒問題。

 因此我們可以得出，每個變數在找不到自己的定義時，都會沿著作用鏈向上尋找，這樣就很可能會出現未預知的錯誤，給排錯添加了很多困難。更麻煩的是，也可能會對父作用域上的變數值進行修改，因此我們在宣告變數時應該盡量加上var，儘管Javascript並不會強迫我們這樣做。

#

以上是解析關於JavaScript作用域的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！