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

xiongzenghui 发布于2019-08-26 11:40 / 2102人阅读

摘要：是一种基于对象的动态弱类型脚本语言以下简称，是一种解释型语言，和其他的编程语言不同，如等编译型语言，这些语言在代码执行前会进行通篇编译，先编译成字节码机器码。然后在执行。

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

全局环境：当JS引擎进入一个代码块时，如遇到标签，就是进入一个全局执行环境

函数环境：当一个函数被调用时，在函数内部就形成了一个函数执行环境

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对象分析：

各个浏览器测试情况如下：

云服务器 GPU云服务器原生js选项卡原理 js代码运行运行js代码错误提示原生js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107350.html

原生JS大揭秘—看清JS继承本质

摘要：继承理论源于生活又高于生活在中继承，和现实生活中继承是相似的如儿子继承父亲财产子女的生理特性有父母的特性身高肤色性格等等只是一定比例上是这样的，不是绝对的一样中继承方法有以下几种本质区别方法特别注意是本质区别冒充继承也称之为借用构造函数这种 JS继承理论源于生活、又高于生活在JS中继承，和现实生活中继承是相似的如:儿子继承父亲财产、子女的生理特性有父母的特性（身高、肤色、性格...

sutaking 2019-08-22 18:09 评论0 收藏0
原生JS大揭秘—撩开this的面纱

摘要：随着函数使用场景的不同，而发生变化。是当前执行上下文中的一部分。在中新增了该方法也是强制更改指向。但是和的区别是更改后不会立即执行，它会返回一个新函数。 this何意？在英文中this是一个人称代词，表示这个的,具体指哪个？不确定，只有在具体的语境中才可确定，在编程语言中this也有同样的类似特性。在js中this是一个关键字，它不能被当做变量、属性，也不可以进行赋值操作。this 随...

Brenner 2019-08-26 11:39 评论0 收藏0
原生JS大揭秘—同步与异步

摘要：中任务分类同步异步同步任务异步任务中异步类型定时任务网络请求回调函数事件绑定只能传入一个参数未完待续 JS中任务分类同步异步同步任务异步任务 JS中异步类型定时任务网络请求回调函数事件绑定 Promise(resolve只能传入一个参数) 未完待续...

不知名网友 2019-08-22 18:11 评论0 收藏0
原生JS大揭秘—原型链

原型链showImg(https://segmentfault.com/img/bVboNT0?w=1332&h=1333);

macg0406 2019-08-23 15:26 评论0 收藏0
原生JS大揭秘—事件循环机制Event Loop

事件循环机制Event Loop showImg(https://segmentfault.com/img/bVbozlD?w=1178&h=564);

SolomonXie 2019-08-23 15:20 评论0 收藏0