一、概述

js是一种异常天真的言语，明白js引擎的实行历程关于我们进修js是异常有必要的。看了许多这轻易文章，大多数是讲的是事宜轮回（event loop）或许变量提拔的等，并没有周全剖析个中的历程。所以觉得把这个js实行的细致历程整顿一下，协助更好的明白js。

1.1基本观点

js是单线程言语。

在浏览器中一个页面永久只要一个线程在实行js剧本代码

js是单线程牢骚，然则代码剖析是异常敏捷的，不会发作剖析壅塞。

js是异步实行的，经由过程实践轮回（event loop）体式格局完成的

临时我们不斟酌事宜轮回（event loop），我们先来看如许一段代码，来肯定我们是不是明白js引擎的实行历程

console.log(person)

console.log(personFun)

var person = "saucxs";

console.log(person)

function personFun() {
    console.log(person)
    var person = "songEagle";
    console.log(person)
}

personFun()

console.log(person)

能够本身直接运用浏览器看出输出效果

起首我们来剖析一下上面的代码，虽然许多开发人员基本上都能答出来，然则照样要烦琐一下。

周全剖析js引擎的实行历程，分为三个阶段

1、语法剖析

2、预编译阶段

3、实行阶段

申明：浏览器先依据js的递次加载<script>标签分开的代码块，js代码块加载终了以后，马上进入到上面的三个阶段，然后再依据递次找下一个代码块，再继承实行三个阶段，无论是外部剧本文件（不异步加载）照样内部剧本代码块，都是一样的，而且都在同一个全局作用域中。

二、语法剖析

js的代码块加载终了以后，会起首进入到语法剖析阶段，该阶段的重要作用：

剖析该js剧本代码块的语法是不是准确，假如涌现不准确会向外抛出一个语法毛病（syntaxError），住手改js代码的实行，然后继承查找并加载下一个代码块；假如语法准确，则进入到预编译阶段。

相似的语法报错的以下图所示：

三、预编译阶段

js代码块经由过程语法剖析阶段以后，语法都准确的下回进入预编译阶段。

在剖析预编译阶段之前，我们先来相识一下js的运转环境，运转环境重要由三种：

1、全局环境（js代码加载终了后，进入到预编译也就是进入到全局环境）

2、函数环境（函数挪用的时刻，进入到该函数环境，差别的函数，函数环境差别）

3、eval环境（不发起运用，存在平安、机能题目）

每进入到一个差别的运转环境都邑竖立 一个响应的实行高低文（execution context），那末在一段js顺序中平常都邑竖立多个实行高低文，js引擎会以栈的数据结构对这些实行举行处置惩罚，形成函数挪用栈（call stack），栈底永久是全局实行高低文（global execution context），栈顶则永久时当前的实行高低文。

3.1函数挪用栈

什么是函数挪用栈？

函数挪用栈就是运用栈存取的体式格局举行治理运转环境，特点是先进后出，落后后出

我们来剖析一下简答的js代码来明白函数挪用栈：

function bar() {
    var B_context = "bar saucxs";

    function foo() {
        var f_context = "foo saucxs";
    }

    foo()
}

bar()

上面代码块经由过程语法剖析后，进入预编译阶段，如图所示

1、起首进入到全局环境，竖立全局实行高低文（global Execution Context ），推入到stack中；

2、挪用bar函数，进入bar函数运转环境，竖立bar函数实行高低文（bar Execution Context），推入stack栈中；

3、在bar函数内部挪用foo函数，则再进入到foo函数运转环境中，竖立foo函数实行高低文（foo Execution Context），如上图，由于foo函数内部没有再挪用其他函数，那末则最先出栈；

5、foo函数实行终了以后，栈顶foo函数实行高低文（foo Execution Context）起首出栈；

6、bar函数实行终了，bar函数实行高低文（bar Execution Context）出栈；

7、全局高低文（global Execution Cntext）在浏览器或许该标签封闭的时刻出栈。

申明：差别的运转环境实行都邑进入到代码预编译和实行两个阶段，语法剖析则在代码块加载终了时一致搜检语法。

3.2竖立实行高低文

实行高低文能够明白成当前的实行环境，与该运转环境相对应。竖立实行高低文的历程当中，重如果做了下面三件事，如图所示：

1、竖立变量对象（variable object）

2、竖立作用域链（scope chain）

3、肯定this的指向

3.2.1竖立变量对象

竖立变量对象重如果经由以下历程，如图所示：

1、竖立arguments对象，搜检当前高低文的参数，竖立该对象的属性与属性值，仅在函数环境（非箭头函数）中举行的，全局环境没有此历程。

2、搜检当前高低文的函数声明，依据代码递次查找，将找到的函数提早声明，假如当前高低文的变量对象没有该函数名属性，则在该变量对象以函数名竖立一个属性，属性值则指向该函数地点堆内存地址援用，假如存在，则会被新的援用覆蓋掉。

3、搜检当前高低文的变量声明，爱去哪找代码递次查找，将找到的变量提早声明，假如当前高低文的变量对象没有变量名属性，则在该变量对象以变量名竖立一个属性，属性值为undefined；假如存在，则疏忽该变量声明。

申明：在全局环境中，window对象就是全局实行高低文的变量对象，一切的变量和函数都是window对象的属性要领。

所以函数声明提早和变量声明提拔是在竖立变量对象中举行的，且函数声明优先级高于变量声明。

下面我们再来剖析这个简朴代码

function fun(m,n){
    var saucxs = 1;

    function execution(){
        console.log(saucxs)
    }
}

fun(2,3)

这里我们在全局环境中挪用fun函数，竖立fun的实行高低文，这里临时不说作用域链以及this指向的题目。

funEC = {
    //变量对象
    VO: {
        //arguments对象
        arguments: {
            m: undefined,
            n: undefined,
            length: 2
        },

        //execution函数
        execution: <execution reference>, 

        //num变量
        saucxs: undefined
    },

    //作用域链
    scopeChain:[],

    //this指向
    this: window
}

1、funEC示意fun函数的实行高低文（fun Execution Context 简写为funEC）；

2、funEC的变量对象中arguments属性，上面如许写只是为了明白，在浏览器中展现以类数组的体式格局展现的

3、<execution reference>示意的是execution函数在堆内存地址的援用

申明：竖立变量对象发作在预编译阶段，还没有进入到实行阶段，该变量对象都不能接见的，由于此时的变量对象中的变量属性还没有赋值，值仍为undefined，只要在举行实行阶段，变量中的变量属性才举行赋值后，变量对象（Variable Object）转为运动对象（Active Object）后，才举行接见，这个历程就是VO->AO历程。

3.2.2竖立作用域链

作用域链由当前实行环境的变量对象（未进入到实行阶段前）与上层环境的一系列运动对象构成，保证了当前实行还款对相符接见权限的变量和函数有序接见。

明白清晰作用域链能够协助我们明白js许多题目包含闭包题目等，下面我们连系一个例子来明白一下作用域链。

var num = 30;

function test() {
    var a = 10;

    function innerTest() {
        var b = 20;

        return a + b
    }

    innerTest()
}

test()

在上面例子中，当实行到挪用innerTest函数，进入到innerTest函数环境。全局实行高低文和test函数实行高低文已进入到实行阶段，innerTest函数实行高低文在预编译阶段竖立变量对象，所以他们的运动对象和变量对象分别是AO（global），AO（test）和VO（innerTest），而innerTest的作用域链由当前实行环境的变量对象（未进入到实行阶段前）与上层环境的一系列运动对象构成，以下：

innerTestEC = {

    //变量对象
    VO: {b: undefined}, 

    //作用域链
    scopeChain: [VO(innerTest), AO(test), AO(global)],  
    
    //this指向
    this: window
}

我们这里能够直接运用数组示意作用域链，作用域链的运动对象或许变量对象能够直接明白成作用域。

1、作用域链的第一项永久是当前作用域（当前高低文的变量对象或许运动对象）；

2、末了一项永久是全局作用域（全局高低文的运动对象）；

3、作用域链保证了变量和函数的有序接见，查找体式格局是沿着作用域链从左至右查找变量或许函数，找到则会住手找，找不到则一向查找全局作用域，再找不到就会消除毛病。

3.2.3闭包

什么是闭包？思索一下

看一下简朴的例子

function foo() {
    var num = 20;

    function bar() {
        var result = num + 20;

        return result
    }

    bar()
}

foo()

由于关于闭包的有许多的差别明白，包含我看一些书本（js高等顺序设计），我这直接以浏览器剖析，以浏览器的闭包为准来剖析闭包，如图

如图所示，谷歌浏览器明白的闭包是foo，那末依据浏览器的标准是怎样定义的闭包，本身总结为三点：

1、在函数内部定义新函数

2、新函数接见外层函数的局部变量，即接见外层函数环境的运动对象属性

3、新函数实行，竖立新函数的实行高低文，外层函数即为闭包

3.2.4肯定this指向

1、在全局环境下，全局实行的高低文中变量对象的this属性指向为window；

2、在函数环境下的this指向比较天真，须要依据实行环境和实行要领肯定，枚举典范例子来剖析

四、总结

由于涉及到的内容过量，下一次将第三阶段（实行阶段）零丁分离出来。另开出新文章细致剖析，重要引见js实行阶段中的同步使命实行和异步使命实行机制（事宜轮回（Event Loop））。

五、参考书本

你不知道的javascript(上卷)