系列文章導航：

JavaScript學習筆記一——數據類型

JavaScript學習筆記二——函數

JavaScript學習筆記三——作用域

JavaScript學習筆記四——Eval函數

JavaScript學習筆記五——類和對象

JavaScript學習筆記六：prototype的提出

Javascript學習筆記七——原型鏈的原理

Javascript學習筆記八——用JSON做原型

Javascript學習筆記九——prototype封裝繼承

Javascript學習筆記十——網頁運行原理

Javascript學習筆記十一——包裝DOM對象

Javascript學習筆記十三——關于響應事件

Javascript學習筆記十二——Ajax入門

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

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

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

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

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

　　看這樣一段代碼：

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

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

　　我們來分別解釋：

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

　　我們可以寫這樣一段代碼：

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

　　當我們執行運行這段腳本時，可以發現，首先彈出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 world,welcome china,hello china.

　　經試驗，都沒問題， 不知道你明白了么？

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

it知識庫：JavaScript學習筆記三——作用域，轉載需保留來源！

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。