每個寫過程式的人都不會對作用域這個概念陌生,那在這篇文章中就來談下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(''); //打开一个窗口并赋给变量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中文網其他相關文章!