原生JS大揭秘—JS代码底层运转道理

2019年8月24日 149次阅读来源: Damon

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`)。

实行高低文的特性

栈底永远是全局实行高低文，有且唯一一个
全局实行高低文只要在浏览器封闭时，才会弹出栈
其他的实行高低文的数目没有限定
栈顶永远是当前运动实行高低文，其他的都处于守候状况中，一旦实行终了，马上弹出栈，然后控制权交回下一个实行高低文
函数只要在每次被挪用时，才会为其竖立实行高低文，函数被声明时是没有的。

实行高低文能够抽象的理解为一个一般的JS对象，一个实行高低文的生命周期也许包括两个阶段：

竖立阶段
此阶段重要完成三件事宜，1、竖立变量对象 2、竖立作用域链 3、肯定this指向
实行阶段
此阶段重要完成变量赋值、函数挪用、其他操纵

变量对象(VO)的竖立历程

1、依据函数参数，竖立并初始化arguments对象，

AO={
    //竖立arguments对象，注重这里还没有增加任何属性
    arguments:{
        length:0 //设置初始值为0
    }
}

2、查找function函数声明，在变量对象上增加属性，属性名就是函数名，属性值就是函数的援用值，假如已存在同名的，则直接掩盖
3、查找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一样有两个阶段
分别是竖立阶段和实行阶段。
在竖立阶段，关于函数的实行高低文，首先会从函数的参数能够逐行实行，

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

关于全局实行高低文的VO对象剖析：

《原生JS大揭秘—JS代码底层运转道理》
各个浏览器测试状况以下：

《原生JS大揭秘—JS代码底层运转道理》

    原文作者：Damon
    原文地址: https://segmentfault.com/a/1190000013225905
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

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

在一段JS代码中可能会发生多个实行高低文，在JS顶用栈这类数据构造来治理实行高低文，栈的特性是“先进后出，后进先出”,这类栈称之为实行高低文栈(Excution Context Stack 简称ECS)。

实行高低文的特性

实行高低文能够抽象的理解为一个一般的JS对象，一个实行高低文的生命周期也许包括两个阶段：

竖立阶段

实行阶段