原生JS大揭秘—JS代码执行原理解刨

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

JS中的执行环境分为三类:

• 全局环境：当JS引擎进入一个代码块时，如遇到<script>xxx</script>标签，就是进入一个全局执行环境
• 函数环境：当一个函数被调用时，在函数内部就造成了一个函数执行环境
• eval()：把字符串单作JS代码执行，不推荐使用

在一段JS代码中可能会产生多个执行上下文，在JS中用栈这种数据结构来管理执行上下文，栈的特色是“先进后出，后进先出”,这种栈称之为执行上下文栈(Excution Context Stack 简称ECS)。

执行上下文的特色

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

有关VO、GO、AO区别

• 全局 VO -> GO
• 函数 VO -> AO

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

• 建立阶段

  此阶段主要完成三件事件，一、建立变量对象 二、创建做用域链 三、肯定this指向

• 执行阶段

  此阶段主要完成变量赋值、函数调用、其余操做

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

• 一、根据函数参数，建立并初始化arguments对象，

  AO={
      //建立arguments对象，注意这里尚未添加任何属性
      arguments:{
          length:0 //设置初始值为0
      }
  }

• 二、查找function函数声明，在变量对象上添加属性，属性名就是函数名，属性值就是函数的引用值，若是已经存在同名的，则直接覆盖

• 三、查找var变量声明(查找变量时，会把函数的参数等价于var声明，因此在AO中也会添加和参数名同样的属性，初始值也是undefined)，在变量对象添加属性，属性名就是变量名，属性值是undefined，若是已经存在同名的，则不处理
  查找var变量声明时，是从函数的参数开始的，此时函数的参数定义至关于以下代码

  Foo(a, b, c){
         //-------------------这一部分是隐藏的咱们没法显示看到-------------------------
         var a=1; //传入参数
         var b=2; //传入参数
         var c; //没有传入参数
         //--------------------------------------------
         var name="kity"
           
         function bar(){}
         
     }
     
     Foo(11,22)

若是存在同名标识符（函数、变量），则函数能够覆盖变量，函数的优先级高于变量

变量对象（OV）和激活对象（AO）是同一个东西，在全局执行上下文中是VO，在函数执行上下文中是AO，由于VO在全局执行上下文中能够直接访问，可是在函数执行上下文中是不能直接访问的，此时有AO扮演VO的角色

以以下代码为例

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->AO）

一行一行执行代码，当遇到一个表达式时，就会去当前做用域链的中查找VO对象，若是找到则返回，若是找不到,则继续查找下一个VO对象，直至全局VO对象终止。
此阶段能够有变量赋值，函数调用等操做，当解释器遇到g_fn()时，就知道这是一个函数调用，而后当即为其建立一个函数执行上下文，fn_EC，该上下文fn_EC一样有两个阶段
分别是建立阶段和执行阶段。
在建立阶段，对于函数的执行上下文，首先会从函数的参数能够逐行执行，

• 先在AO中添加一个属性arguments

AO={

arguments:{
   length:0
}

}

• 查找function函数声明
• 查找var变量声明(在查找var变量时，并无向arguments中注入实参，实参是在执行阶段注入的，由于arguments处理的是实参，这个时候尚未涉及到实参值)

特别说明：执行阶段，当函数参数执行赋值操做时，若是AO中有同名的函数存在，则直接跳过，同时会将arguments对象中相应的属性值修改为该函数值，这是一个坑啊

function test(a, b) {

    console.log(a);//1

    c = 0;

    var c;

    a = 3;
    b = 2;

    console.log(b);//2

    function b() { }
    function d() { }
    console.log(b);//2
}
test(1)

关于全局执行上下文的VO对象分析：

各个浏览器测试状况以下：