JavaScript做用域舉例分析

首先，咱們看一下瀏覽器對js的執行順序：

1，遇到script標籤進入做用域

2，遇到函數調用進入做用域

 

進入做用域後：

1，js預解析：

• 1，建立一個獨立的空間
• 2，找var、方法參數和function方法。遇到var和方法參數時，將var和方法參數聲明的變量保存爲underfined；遇到function方法時，完整保存function方法。
• （當變量名和方法名一致的時候，保留方法，去掉變量；當方法名一致的時候，後執行的方法會覆蓋掉前一個方法）

2，順序執行

開始從上到下順序執行，遇到表達式（+、-、*、/、++、--....）就去修改預解析裏面的變量值。

 

      上面沒有理解也不要緊，咱們會經過例子，來告訴你瀏覽器每一步的執行狀況(～￣▽￣)～ 

 

例子：

<script type="text/javascript"> 
var a=100;
     function cc() {
        alert(a);
        var a=200;
        alert(a);
     }
     cc();
     alert(a);
     var a;
     alert(a);
     var a=300;
     alert(a);
</script>

1,瀏覽器遇到script進入做用域，開闢獨立空間A

2，開始預解析，找到var a=100，將a錄入空間A，有a=underfined。找到function，空間A保存function完整內容。找到var a，a指向空間A的a=underfined。找到var a=300，a指向空間A的a=underfined。此時空間A有：a=underfined、function cc(){.....}，預解析完成

預解析：建立一個獨立的空間、找var、方法參數和function方法。遇到var和方法參數時，將var和方法參數聲明的變量保存爲underfined；遇到function方法時，完整保存function方法。

 

3，開始順序執行，遇到表達式（+、-、*、/、++、--....）就去修改預解析裏面的變量值。第一行就遇到了表達式「=」（var a=100）,因此空間A中a的值修改成100。

     繼續執行，遇到了函數調用cc（），再次進入做用域，開闢獨立空間B

• 1，在方法cc中開始預解析，找到了var a=200,將a錄入空間B，有a=underfined，預解析完成
• 2，開始順序執行，遇到第一個alert（a）（就近原則，在函數內找var聲明的變量，沒有則向外尋找，因此alert（a）指向空間B），有a=underfined，因此彈出underfined；繼續執行遇到表達式「=」（var a=200），空間B中a的值修改成200；繼續向下執行，遇到第二個alert（a），a指向空間B，因此彈出200

4，執行完cc（）後，繼續順序執行，遇到第三個alert（a），指向空間A，彈出100

5,繼續執行，遇到var a，因爲沒有表達式，因此空間A中a的值不變，還是100

6，繼續順序執行，遇到第四個alert（a），指向空間A，彈出100

7，繼續執行，遇到var a =300，有表達式「=」，因此空間A中a值修改成300

8，繼續順序執行，遇到第五個alert（a），指向空間A，彈出300

 

推薦參考網址：http://www.cnblogs.com/lonelyxmas/p/3990954.html