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