JS—预编译原理

自己看了很多解释找到的算是两种解释吧，自己总结的大概如下，两种解释对函数function（）的预编译顺序不同，其他大概相同，结合着看更好理解
参考：
JS运行三部曲—预编译：https://blog.csdn.net/Leo__Summer/article/details/77318411
JavaScript运行原理分析：https://www.jb51.net/article/134801.htm

JavaScript运行原理

JavaScript是一种基于对象的动态、弱类型脚本语言（以下简称JS），是一种解释型语言，和其他的编程语言不同，如java/C++等编译型语言，这些语言在代码执行前会进行通篇编译，先编译成字节码（机器码）。然后在执行。而JS不是这样做的，JS是不需要编译成中间码，而是可以直接在浏览器中运行，JS运行过程可分为两个阶段，编译和执行。(可参考你不知道的JS这本书），当JS控制器转到一段可执行的代码时（这段可执行代码就是编译阶段生成的），会创建与之对应的执行上下文(Excution Context简称EC)。执行上下文可以理解为执行环境（执行上下文只能由JS解释器创建，也只能由JS解释器使用，用户是不可以操作该‘对象’的）。

---

JavaScript运行三部曲

（一）语法分析

（二）预编译

（三）解释执行

语法分析：通俗来说就是通篇检查你的代码有没有语法错误，有语法错误的话，程序是不会执行的

解释执行：就是程序读一句执行一句

预编译：就是在函数执行之前，在你的内存中申请一点空间，存放变量和函数；详解如下：

理解预编译首先要明白函数声明和变量赋值：

function a(){ }//函数声明
——这种形式的写法是函数声明，即声明一个函数，脚本在执行之前会做预编译处理。

var a= function(){ }//变量赋值
—— 这种写法是变量赋值，函数在js语言里也是一种数据，匿名函数作为变量赋值给定义的变量。这种形式在预编译处理阶段，只会给变量a分配一个内存空间，不会做初始化。初始化过程中会在执行时执行。

---

第一种理解

预编译(函数执行前)

1. 创建AO对象（Active Object）
2. 查找函数形参及函数内变量声明，形参名及变量名作为AO对象的属性，值为undefined
3. 实参形参相统一，实参值赋给形参
4. 查找函数声明，函数名作为AO对象的属性，值为函数引用

预编译(脚本代码块script执行前)

1.创建GO对象（Global Object）
2. 查找全局变量声明（包括隐式全局变量声明，省略var声明），变量名作全局对象的属性，值为undefined
3. 查找函数声明，函数名作为全局对象的属性，值为函数引用

注：
执行期上下文：英文名Activation Object，简称AO
全局对象：英文名Global Object，简称GO
AO和GO都是一种对象

注意问题：
预编译只有变量声明、函数声明，并不会发生赋值，赋值发生在执行阶段
匿名函数function (){ } 不参与预编译

console.log(a);
    var a=111;
    console.log(a);
    function a() {
        // body...
    }
    console.log(a);
    console.log(b);
    function b(){}
    console.log(c);
    var c;
    c=222;
    console.log(c);
    console.log(d);
    var d=function(){}
    console.log(d);

打印结果

ƒ a() {
        // body...
    }
111
111
ƒ b(){}
undefined
222
undefined
ƒ (){}

上面那段代码，fun函数执行之前，先发生预编译过程
第一步：

AO={}

第二步：

AO = {
      a:undefined,
      c:undefined,
      d:undefined     
}

第三步

AO = {
      a:1,
      c:undefined,
      d:undefined     
}

第四步

AO={
    a:function(){},
    b:function(){},
    c:undefined,
    d:undefined  
}

预编译完成，然后函数执行后

AO={
    a:111,
    b:function(){},
    c:222,
    d:function(){}
}

解释执行过程

    console.log(a);//函数未执行，打印function(){}
    var a=111;//执行a=111
    console.log(a);//打印111
    function a() {
        // body...
    }
    console.log(a);//打印111
    console.log(b);//打印function(){}
    function b(){}
    console.log(c);//函数未执行，打印undefined 
    var c;
    c=222;//执行c=222
    console.log(c);//打印222
    console.log(d);//函数未执行，打印undefined 
    var d=function(){}//执行d=function(){}
    console.log(d);//打印function(){}

---

第二种理解

深度理解JS运行原理

全局环境：当JS引擎进入一个代码块时，如遇到script >xxx < /script标签，就是进入一个全局执行环境
函数环境：当一个函数被调用时，在函数内部就形成了一个函数执行环境
eval() ：把字符串单做JS代码执行，不推荐使用
在一段JS代码中可能会产生多个执行上下文，在JS中用栈这种数据结构来管理执行上下文，栈的特点是“先进后出，后进先出”,这种栈称之为函数调用栈

执行上下文的特点

• 栈底永远是全局执行上下文，有且仅有一个
• 全局执行上下文只有在浏览器关闭时，才会弹出栈
• 其他的执行上下文的数量没有限制
• 栈顶永远是当前活动执行上下文，其余的都处于等待状态中，一旦执行完毕，立即弹出栈，然后控制权交回下一个执行上下文
• 函数只有在每次被调用时，才会为其创建执行上下文，函数被声明时是没有的。

执行上下文可以形象的理解为一个普通的JS对象，一个执行上下文的生命周期大概包含两个阶段：

创建阶段
此阶段主要完成三件事件，1、创建变量对象 2、建立作用域链 3、确定this指向

执行阶段
此阶段主要完成变量赋值、函数调用、其他操作

变量对象(VO)的创建过程

• 根据函数参数，创建并初始化arguments对象，给arguments对象添加属性”0”,”1”,”2”,”3”等属性，其初始值为undefined，并设置arguments.length值为实际传入参数的个数。
• 查找function函数声明，在变量对象上添加属性，属性名就是函数名，属性值就是函数的引用值，如果已经存在同名的，则直接覆盖
• 查找var变量声明(查找变量时，会把函数的参数等价于var声明，所以在VO中也会添加和参数名一样的属性，初始值也是undefined)，在变量对象添加属性，属性名就是变量名，属性值是undefined，如果已经存在同名的，则不处理，如果存在同名标识符（函数、变量），则函数可以覆盖变量，函数的优先级高于变量

变量对象（OV）和激活对象（AO）是同一个东西，在不同时期的两种叫法。在创建时期叫变量对象，在执行时期叫激活对象
以如下代码为例

var g_name="tom";
var g_age=20;
function g_fn(num){
 var l_name="kity";
 var l_age=18;
 function l_fn(){
  console.log(g_name + '===' + l_name + '===' + num);
 }
}
g_fn(10);

编译阶段

当JS控制器转到这一段代码时，会创建一个执行上下文，G_EC

执行上下文的结构大概如下：

G_EC = {
 VO   : {},
 Scope_chain : [],
 this  : {}
}

/* VO的结构大概 */
VO = {
 g_name : undefined,
 g_age : undefined,
 g_fn : <函数在内存中引用值>
}

/* Scope_chain的大概结构如下 */
Scope_chain = [ G_EC.VO ] // 数组中第一个元素是当前执行上下文的VO，第二个是父执行上下文的VO,最后一个是全局执行上下文的VO,在执行阶段，会沿着这个作用域链一个一个的查找标识符，如果查到则返回，否知一直查找到全局执行上下文的VO

/* this */
this = undefined // 此时this的值是undefined

执行上下文一旦创建完毕，就立马被压入函数调用栈中，此时解释器会悄悄的做一件事情，就是给当前VO中的函数添加一个内部属性[[scope]],该属性指向上面的作用域链。

g_fn.scope = [ global_EC.VO ] // 该scope属性只能被JS解释器所使用，用户无法使用

执行阶段

一行一行执行代码，当遇到一个表达式时，就会去当前作用域链的中查找VO对象，如果找到则返回，如果找不到,则继续查找下一个VO对象，直至全局VO对象终止。
此阶段可以有变量赋值，函数调用等操作，当解释器遇到g_fn()时，就知道这是一个函数调用，然后立即为其创建一个函数执行上下文，fn_EC，该上下文fn_EC同样有两个阶段
分别是创建阶段和执行阶段。
在创建阶段，对于函数执行上下文，在创建变量对象时，会多创建一个arguments对象，然后为arguments对象添加属性:”0”，”1”, “2”其初始值为undefined,

• 查找function函数声明
• 查找var变量声明