js作用域

一 例子

<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>
执行结果为:undefined, 200, 100, 100, 300

二 浏览器的js执行顺序

• 遇到script标签/函数调用时,进入作用域
• 进入作用域后,执行js预解析

          1. 创建一个独立的空间

          2.由上至下顺序查看代码。

          3.遇到var时，将var声明的变量保存在独立空间中,变量值为underfined；

          4.遇到方法参数时，将方法参数声明的变量保存在独立空间中,变量值为underfined；

          5.遇到function方法时，完整保存function方法。

          6.当变量名和方法名一致的时候，保留方法，去掉变量；当方法名一致的时候，后执行的方法会覆盖掉前一个方法

• 顺序执行

           从上到下顺序执行，遇到表达式（+、-、*、/、++、--....）就去修改作用域里面的变量值。

  三 例题结果分析

• 浏览器遇到script进入作用域，开辟独立空间A
• 预解析:

            1.遇到var a=100，将a录入空间A，有a=underfined。

            2.遇到function，空间A保存function完整内容。

            3.遇到var a，a指向空间A的a=underfined。找到var a=300，a指向空间A的a=underfined。

            4.此时空间A有：a=underfined、function cc(){.....}，预解析完成

• 顺序执行，遇到表达式（+、-、*、/、++、--....）就去修改预解析里面的变量值。第一行就遇到了表达式“=”（var a=100）,所以空间A中a的值修改为100。

• 继续执行，遇到了函数调用cc（），再次进入作用域，开辟独立空间B
• 在方法cc中开始预解析

            1.遇到了var a=200,将a录入空间B，有a=underfined，预解析完成

• 顺序执行，遇到第一个alert（a），此时空间B中有a=underfined，所以弹出underfined；继续执行遇到表达式“=”（var a=200），空间B中a的值修改为200；继续向下执行，遇到第二个alert（a），a指向空间B，所以弹出200

• 执行完cc（）后，继续顺序执行，遇到第三个alert（a），指向空间A，弹出100
• 继续执行，遇到var a，由于没有表达式，所以空间A中a的值不变，仍是100
• 继续顺序执行，遇到第四个alert（a），指向空间A，弹出100
• 继续执行，遇到var a =300，有表达式“=”，所以空间A中a值修改为300
• 继续顺序执行，遇到第五个alert（a），指向空间A，弹出300

推荐参考网址：http://www.cnblogs.com/lonelyxmas/p/3990954.html