JavaScript作用域举例分析

2019独角兽企业重金招聘Python工程师标准>>>

首先，我们看一下浏览器对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

 

 

转载于:https://my.oschina.net/u/2998098/blog/1493666