javascript解析机制——预解析

JavaScript解析机制是什么？

　　JavaScript解析过程分为两个阶段，一个是编译阶段，另外一个就是执行阶段。

　　* 编译阶段

　　编译阶段就是我们常说的JavaScript预解析（预处理）阶段，在这个阶段JavaScript解释器将完成把JavaScript脚本代码转换到字节码。

　　* 执行阶段

　　　　在编译阶段JavaScript解释器借助执行环境把字节码生成机械码，并顺序执行。

编译阶段（预解析阶段）做什么操作？

　　[b]* var , function声明的变量提升[/b]

　　　　首先，创建一个当前执行环境下的活动对象，然后将用 var 声明的变量设置为活动对象的属性（也就是将其添加到活动对象当中）并将其赋值为undefined，然后将 function 定义的函数 也添加到活动对象当中。

1 if( false ){
2     var aa = 20;
3     var bb = 30;
4 }
5
6 function AA(){};
7 function BB(){};
8
9 //var定义的aa,bb以及function定义的AA(),BB()都会被变量提升到window对象下面

　

　* 函数声明与函数表达式在预解析的区别

　　　　首先，我们知道解析器会对function定义的函数（也就是函数声明）在代码开始执行之前对其实行函数声明提升（function declaration hoisting），所以在函数声明之前调用该函数是不会在执行期间报错，但是函数表达式不同，函数表达式用 var 声明，也就是说解析器会对其变量提升，并对其赋值为undefined，然后在执行期间，等到执行到该var 变量的时候再将其变量指向一个function函数，所以在函数表达式之前执行该函数是会报错的。

1 AA();
2 function AA(){};
3
4 BB();
5 var BB = function(){};
6
7 //AA();不会报错，因为是以function的变量提升，BB()会报错，因为是以var的变量提升，到其相当于 BB(); var BB = undefined; BB = function(){};

　　* function 覆盖

　　　　若定义了两个同名的函数，则在预解析期间后面一个会覆盖签名一个

1 AA();   // 输出 I am AA_2;
2 function AA(){
3    console.log('I am AA_1');
4 };
5
6 AA();  // 输出 I am AA_2;
7 function AA(){
8   console.log('I am AA_2');
9 }

　　* 预解析把变量或函数解析到其运行时的环境中

　　　　解析器将变量提升并不是将所有的变量都提升到window对象下面，其提升的原则是提升到变量运行的环境中去。

1 aa = "I am aa";
2 (function(){
3     console.log(aa);  // 输出 aa 是 undefined
4     var aa = "I am aa in a function";
5     console.log(aa);  //输出 aa 是 I am aa in a function
6 })();
7
8 // 这里 aa 被变量提升，但是aa 没有被变量提升到 window下面，而是被提升到其运行的环境 (function(){ })() 中去，也就是等同于
9
10 // aa =  "I am aa";
11 //(function(){
12 //    var aa;
13 //    console.log(aa);  // 输出 aa 是 undefined
14 //    aa = "I am aa in a function";
15 //    console.log(aa);  //输出 aa 是 I am aa in a function
16 //})();
17
18
19
20 // 下面代码等同于上面，目的是为了若看不懂上面，则可看下面。
21 aa = "I am aa";
22 function AA(){
23     console.log(aa);
24     var aa = "I am aa in a function";
25     console.log(aa);
26 }
27 AA();

　　* JavaScript“预解析”分段进行

　　　　所谓分段进行是按照<script>标签来分块进行预解析

1 <script>
2 AA();  // 输出 AA2;
3 function AA(){
4    console.log('AA1');
5 }
6
7 function AA(){
8    console.log('AA2');
9 }
10 </script>
11
12
13 <script>
14 function AA(){
15    console.log('AA3');
16 }
17 </script>
18
19 //上面例子说明function函数声明是分块的，然而至于var变量的提升经过反复验证是不分块的( 此处如有不同意见请指教 )。

　　* var 变量提升以及 function 函数声明提升

　　　　该点是对函数声明以及函数表达式进一步的说明，其实前面函数声明和函数表达式在预解析的不同表现，其主要的原因就是 var 和 function 两者不同的提升。这个问题从解析阶段到运行阶段来说明。首先，在解析阶段 var 后面的 AA 会被提升然后 AA 被定义为undefined，BB 也会被提升，而BB被提升后的内容就是整个 function 里面的内容，其实从浏览器的控制台我们可以看出一二。然后，整个解析过程完了就到了运行阶段，在运行阶段期间，当读到 AA() 的时候，其实就是将 AA 这个变量指向function(){}这个函数然后调用，而到了 BB() 的时候，就会从之前声明的函数中去查找该早已经声明的函数，然后直接调用。

1 var AA = function(){
2    console.log(' AA_ 1 ');
3 }
4
5 AA(); // 输出 AA_1
6
7
8 function AA(){
9    console.log(' AA_2 ');
10 }
11 AA(); //输出 AA_2
12
13 //这个例子就很好说明了 var 在运行阶段动态内建，而 function 在预解析阶段静态建立。