JS运行三部曲

  • 第一步：语法分析

  • 第二步：预编译

  • 第三步：解释执行

预编译

语法分析也叫语义分析，语法分析他是通篇执行的一个过程，比如我写了好多行代码，这些代码在执行的时候他是解释一行执行一行，但是在执行之前系统执行的第一步它会扫描一遍，看看有没有低级的语法错误，比如少些个符号，带个特殊字符之类的，它会通篇扫描一遍，但是不执行，这个通篇扫描的过程叫语法分析，通篇扫描之后它会预编译，然后在解释一行执行一行，也就是解释执行。

预编译前奏

  • imply global 暗示全局变量: 即任何变量,如果变量未经声明就赋值,自变量就为全局对象所有

    • eg : a = 123；

    • eg : var a = b = 123；

  • 一切声明的全局变量,全是 window 的属性

    • eg: var a = 123; ===> window.a = 123;
  1. //例子:
  2.     function test (){
  3.         console.log("a");
  4.     }
  6.     test();// 成功打印出a,
  10.     box();// 写在方法之前也成功打印出a,为什么能执行就是有预编译的过程
  11.     function box (){
  12.         console.log("a");
  13.     }
  17.     var a =123;
  18.     console.log(a);//输出123
  21.     console.log(a);//输出undefined,不报错;
  22.     var a = 123;
  24.     // 但是如果直接打印会报错;
  25.     console.log(b)//报错
  26.     // 也是预编译的效果
  28.     // 如果想偷懒记住两句话
  29.     // 函数声明整体提升
  30.     // 变量 声明提升

解释一下函数声明整体提升：如果你写一个函数声明，不管你写到哪里，浏览器会把这个函数提到逻辑的最前面，所以你不管在哪里调用，在上面调用也好，下面调用也好，本质上他都是在函数的下面调用，他会把函数声明永远给你提升到逻辑的最前面。

变量 声明提升比如

  1. var a = 123;
  2. //实际上他是两步
  4. var a;    // 第一步是先声明变量
  5. a = 123;// 第二步在变量赋值

所以系统提升的变量 而不是变量带着值一起提升,所以在例子中a是打印出undefined;

注意,这两句话不是万能的

比如

  1. function a(a){
  2.     var a = 123;
  3.     var a = function(){
  5.     }
  6.     a();
  7. }
  9. var a = 123;

这个就不是那两句话可以解决的

在解释上面的之前,要先用弄什么是imply global

  • imply globa：暗示全局变量：即任何变量，如果变量未经声明就赋值，自变量就位全局对象所有。

    • eg : a = 123;

    • eg : var a = b = 123;

  1. a = 10;
  2. console.log(a);//打印10
  3. // 然后在window属性上有了a
  4. window.a//10
  6. var b = 20;
  7. // 你声明了window也有b
  9. //window就是全局的域

预编译正式

  • 创建AO对象

  • 找形参和变量声明,将变量和形参名作为AO属性名,值为undefined

  • 将实参值和形参统一

  • 在函数体里面找函数声明，值赋予函数体

  1. function fn (a){
  2.     console.log(a);
  4.     var a = 123;
  5.     console.log(a);
  7.     function a (){};
  8.     console.log(a);
  10.     var b = function (){
  12.     }
  13.     console.log(b);
  15. }
  17. fn(1);

这个例子，参数、变量，函数名字都叫a。首先可以确定的是肯定会发生一个覆盖的现象，这样子就很矛盾前面说了函数的预编译执行在函数执行的前一刻，可以这样子说，预编译就把这些矛盾给调和了。

首先预编译的

第一步 : 创建了一个 AO 对象,全称是 Activation object 也就是作用域,也叫执行期上下文

  1. AO{
  3. }

第二步 : 找形参和变量声明,将变量和形参名作为 AO 属性名,值为 undefined 

  1. AO{
  2.     a : undefined
  3.     b : undefined
  4. }

第三步 : 将实参值和形参统一

  1. AO{
  2.     a : 1;
  3.     b : undefined
  4. }

第四步 : 在函数体里面找函数声明,值赋予函数体

  1. AO{
  2.     a : 1,
  3.     b : undefined,
  4.     //b是是函数表达式,不是函数声明,所以不变
  5.     //然后有a了 有b了,然后将这个函数声明的名作为AO对象挂起来
  6. }
  8. //然后值赋予函数体,也就是把a和b的属性值,变成函数体
  9. //覆盖掉a 和b的的属性值
  10. //也就变成下面的
  11. //因为第四步的优先级最高
  12. AO{
  13.     a : function a () {}
  14.     b : undefined,
  15.     //b是是函数表达式,不是函数声明,所以不变
  16. }

至此预编译过程结束,开始执行代码,执行函数

然后我们在看上面的例子

  1. //预编译结果
  2. AO{
  3.     a : function a () {}
  4.     b : undefined,
  5. }
  6. //开始执行代码
  7. function fn (a){
  8.     //第一步开始打印a
  9.     //根据上面预编译的结果,
  10.     //所以打印结果是function a () {}
  11.     console.log(a);
  13.     //第二步执行 var a = 123;
  14.     //因为在预编译的第二步里面,变量已经提升了
  15.     //所以第二步只执行的赋值
  16.     //a = 123;去AO对象里面去找a
  17.     //也就变成
  18.     //AO{
  19.         //a : 123   这个才是a的存储值
  20.         //b : undefined,
  21.     //}
  22.     var a = 123;
  23.     //所以打印出123
  24.     console.log(a);
  25.     //因为这句在话在预编译的时候系统已经看了
  26.     //所以不在看这句话
  27.     function a (){};
  28.     //所以下面的console.log(a)
  29.     //还是打印123;
  30.     console.log(a);
  31.     //一样下面的var b这句话在预编译的时候已经看了,所以不在看
  32.     //AO{
  33.         //a : 123   
  34.         //所以b的值变成function(){}
  35.         //b : function(){}
  36.     //}
  37.     var b = function (){
  39.     }
  40.     //所以打印出function(){}
  41.     console.log(b);
  43. }
  45. fn(1);

我们在看个例子

  1. function test(a , b){
  2.     console.log(a);
  3.     c = 0;
  4.     var c;
  5.     a = 3;
  6.     b = 2;
  7.     console.log(b);
  8.     function b () {}
  9.     console.log(b);
  10. }
  12. test(1,4);
  13. //这下我们就很快的得出打印的东西
  14. //a-->1
  15. //b-->2
  16. //b-->2

预编译不只会在函数体里面,也会发生在全局里面

全局里面的第一步是先生成GO Global Object,其他一样

GO === window

那么问题来了是GO先还是AO先

答案是先执行GO

注: 本章节讲述了 ES5 的预编译过程，会在章节后面 ES5 结尾处说上 ES6 的过程，作为对比