javascript编译时和运行时区别 javascript 编译

一、JavaScript运行三部曲

1,：语法分析

2：预编译

3：解释执行

语法分析，就是引擎检查你的代码有没有什么低级的语法错误 ；

解释执行便是执行代码了；

预编译简单理解就是在内存中开辟一些空间，存放一些变量与函数 

二、JavaScript引擎运行过程

在浏览器环境中，JavaScript引擎按<script>标签代码块从上到下的顺序加载并立即解释执行

1.遇到第一个<scprit>,页面产生便创建了GO全局对象（Global Object）（也就是大家熟悉的window对象）

2.第一个脚本文件加载

3.脚本加载完毕后，分析语法是否合法

4.预编译

4.1.脚本代码块script执行前开始预编译

1).查找全局变量声明（包括隐式全局变量声明，省略var声明），作为GO属性，值赋予undefined

2).查找函数声明，函数名作为GO属性，值赋予函数体（函数引用）

->解释执行代码

4.2.在函数执行前预编译

1）.创建AO(Activation Object)对象

2）.查找函数形参和函数内变量声明，形参名及变量名作为AO对象的属性，值为undefined

3）.实参形参相统一，实参值赋给形参 

4）.在函数体里面找函数声明，函数名作为AO对象的属性，值赋予函数体（函数引用）

->解释执行函数中代码

5.第一个脚本文件执行完毕，加载第二个脚本文件

6.第二个脚本文件加载完毕后，进行语法分析

7.语法分析完毕，开始预编译 

8.解释执行....

注意：

预编译阶段发生变量声明和函数声明，没有初始化行为（赋值），匿名函数不参与预编译 

只有在解释执行阶段才会进行变量初始化 

三、预编译

1.脚本代码块script执行前开始预编译

1).查找全局变量声明（包括隐式全局变量声明，省略var声明），作为GO属性，值赋予undefined

2).查找函数声明，函数名作为GO属性，值赋予函数体（函数引用）

2.在函数执行前预编译

1）.创建AO(Activation Object)对象

2）.查找函数形参和函数内变量声明，形参名及变量名作为AO对象的属性，值为undefined

3）.实参形参相统一，实参值赋给形参 

4）.在函数体里面找函数声明，函数名作为AO对象的属性，值赋予函数体（函数引用）

四、JavaScript预编译实例

1.例1

<script>
  var a = 1;// 变量声明
  function b(y){//函数声明
    var x = 1;
    console.log('so easy');
  };
  var c = function(){//是变量声明而不是函数声明！！
    //...
  }
  b(100);
</script>
<script>
  var d = 0;
</script>

• 变量声明 var…
• 函数声明 function…

预编译过程：

• 查找变量声明，作为GO属性，值赋予undefined
• 查找函数声明，作为GO属性，值赋予函数体

//伪代码
GO/window = {
  //页面加载创建GO同时，创建了document、navigator、screen等等属性，此处省略
  a: undefined,
  c: undefined，
  b: function(y){
    var x = 1;
    console.log('so easy');
  }
}

解释执行代码（直到执行函数b） 

//伪代码
GO/window = {
  //变量随着执行流得到初始化
  a: 1,
  c: function(){
    //...
  },
  b: function(y){
    var x = 1;
    console.log('so easy');
  }
}

 执行函数b之前，发生预编译 ：

• 创建AO活动对象（Active Object）
• 查找形参和变量声明，值赋予undefined
• 实参值赋给形参
• 查找函数声明，值赋予函数体

//伪代码
AO = {
  //创建AO同时，创建了arguments等等属性，此处省略
  y: 100,
  x: undefined
}

解释执行函数中代码

 

2.例2 

 执行函数之前，发生的预编译

function fn(a) {
    console.log(a);
    var a = 123;
    console.log(a);
    function a() { };
    console.log(a);
    var b = function () { };
    console.log(b);
    function d() { };
}
fn(1);

那么预编译过程，创建AO对象里的值变化过程如下

根据四部曲的1和2步骤，得：

AO{

a:undefind

b:undefind
}

 

根据3步骤,得:

AO{

a:1

b:undefind
}

根据4步骤，得：

AO{
a:function a() { }
}
b:undefind
d:function d() { }
}

第一个log

console.log(a);//function a(){}

第二个log

console.log(a);//123

第三个log

console.log(a);//123

第四个log

console.log(b);//function () { }