一、什么是执行上下文

执行上下文（Execution Context），简称EC。

网上有很多对于执行上下文定义的形容，简略了解一下，其实就是作用域，也就是运行这段JavaScript代码的一个环境。

二、执行上下文的组成和分类

1. 组成

对于每个执行上下文EC，都有三个重要的属性：

  1. 变量对象Variable Object（变量申明、函数申明、函数形参）
  2. 作用域链 Scope Chain
  3. this指针

2. 分类

执行上下文分为3类

  1. 全局执行上下文
  2. 函数执行上下文
  3. eval执行上下文（简直不必，临时不做解释）

全局执行上下文

术语了解
代码开始执行前首先进入的环境。
特点
全局执行上下文有且只有一个。客户端中个别由浏览器创立，也就是window对象。
留神点

（1）应用var申明的全局变量，都能够在window对象中拜访到，能够了解为window是var申明对象的载体。

（2）应用let申明的全局变量，用window对象拜访不到。

函数执行上下文

术语了解
函数被调用时，会创立一个函数执行上下文。
特点
函数执行上下文能够有多个，即便调用本身，也会创立一个新的函数执行上下午呢。

以上是对全局执行上下文和函数执行上下文的区别。

上面再来看看执行上下文的生命周期。

三、执行上下文的生命周期

执行上下文的生命周期能够分为3个阶段：

  1. 创立阶段
  2. 执行阶段
  3. 回收阶段

1. 创立阶段

产生在当函数被调用，然而在未执行外部代码之前。

创立阶段次要做的事件是：

（1）创立变量对象 Variable Object（创立函数形参、函数申明、变量申明）

（2）创立作用域链 Scope Chain

（3）确定this指向 This Binding

咱们先用代码来更直观的了解下创立阶段的过程：

function foo(i){    var a = 100;    var b = function(){};    function c(){}}foo(20);

当调用foo(20)的时候，执行上下文的创立状态如下：

ExecutionContext:{    scopeChain:{ ... },    this:{ ... },    variableObject:{        arguments:{            0: 20,            length: 1        },        i: 20,        c:<function>,        a:undefined,        b:undefined    }}

2. 执行阶段

创立实现后，程序主动进入执行阶段，执行阶段次要做的事件是：

（1）给变量对象赋值：给VO中的变量赋值，给函数表达式赋值。

（2）调用函数

（3）程序执行代码

还是以下面的代码为例，执行阶段给VO赋值，用伪代码示意如下：

ExecutionContext:{    scopeChain:{ ... },    this:{ ... },    variableObject:{        arguments:{            0: 20,            length: 1        },        i: 20,        c:<function>,        a:100,        b:function    }}

3. 回收阶段

所有代码执行结束，程序敞开，开释内存。

上下文出栈后，虚拟机进行回收。
全局上下文只有当敞开浏览器时才会出栈。

依据以上内容，咱们理解到执行上下文的创立须要创立变量对象，那变量对象到底是什么呢？

四、变量对象 VO 和 流动对象 AO

1. VO 概念了解

变量对象Variable Object，简称VO。简略了解就是一个对象，这个对象寄存的是：全局执行上下文的变量和函数。

VO === this === Global

VO的两种非凡状况：

（1）未通过var申明的变量，不会存在VO中

（2）函数表达式（与函数申明绝对），也不在VO中

2. AO 概念了解

流动对象Activation Object，也叫激活对象，简称AO。
激活对象是在进入函数执行上下文时（函数执行的前一刻）被创立的。

函数执行上下文中，VO是不能间接拜访，所以AO表演了VO的角色。

VO === AO,并且增加了形参类数组和形参的值

Arguments Object是函数上下文AO的一个对象，它蕴含的属性有：

（1）callee：指向以后函数的援用

（2）length：真正传递参数的个数

（3）properties-indexes：函数的参数值（依照参数列表从左到右排列）

3. VO 的初始化过程

（1）依据函数参数，创立并初始化arguments

变量申明var、函数形参、函数申明

（2）扫描函数申明

函数申明，是变量对象的一个属性，其属性名和值都是函数对象创立进去的。若变量对象曾经蕴含了雷同名字的属性，则替换它的值。

（3）扫描变量申明

变量申明，即变量对象的一个属性，其属性名即变量名，其值为undefined。如果变量名和曾经申明的函数名或者函数的参数名雷同，则不影响曾经存在的属性。

注：函数申明优先级高于变量申明优先级

五、示例剖析

1. 如何了解函数申明中“若变量对象曾经蕴含了雷同名字的属性，则替换它的值”

用代码来了解一下：

function fun(a){    console.log(a); // function a(){}    function a(){}}fun(100);

咱们调用了fun(100),传入a的值是100，为什么执行console语句后后果却不是100呢？别急，咱们接着剖析~

创立阶段：

步骤 1-1：依据形参创立arguments，用实参赋值给对应的形参，没有实参的赋值为undefinedAO_Step1:{    arguments:{        0: 100,        length:1    },    a: 100}步骤 1-2：扫描函数申明，此时发现名称为a的函数申明，将其增加到AO上，替换掉曾经存在的雷同属性名称a，也就是替换掉形参为a的值。AO_Step2:{    arguments:{        0: 100,        length:1    },    a: 指向function a(){}}步骤 1-3：扫描变量申明，未发现有变量。

执行阶段：

步骤 2-1：没有赋值语句，第一行执行console命令，而此时a指向的是funciton，所以输入function a(){}

2. 如何了解变量申明中“如果变量名和曾经申明的函数名或者函数的参数名雷同，则不影响曾经存在的属性”

用代码来了解一下

情景1：变量与参数名雷同

function fun2(a){    console.log(a); // 100    var a = 10;    console.log(a) // 10}fun2(100);// 剖析步骤：创立阶段：步骤 1-1：依据arguments创立并初始化AOAO = {    arguments:{        0: 100,        length:1    },    a:100}步骤 1-2：扫描函数申明，此时没有额定的函数申明，所以AO还是和上次统一AO = {    arguments:{        0: 100,        length:1    },    a:100}步骤 1-3：扫描变量申明，发现AO中曾经存在了a属性，所以不批改已存在的属性。AO = {    arguments:{        0: 100,        length:1    },    a:100}执行阶段：步骤 2-1：按程序执行console语句，此时AO中的a是100，所以输入100.步骤 2-2：执行到赋值语句，对AO中的a进行赋值，此时a是10。步骤 2-3：按程序执行，执行console语句，此时a是10，所以输入10。

情景2：变量与函数名雷同

function fun3(){    console.log(a); // function a(){}    var a = 10;    function a(){}    console.log(a) // 10}fun3();// 剖析步骤：创立阶段：步骤 1-1：依据arguments创立并初始化AOAO={    arguments:{        length:0    }}步骤 1-2：扫描函数申明,此时a指向函数申明(Function Declaration)AO={   arguments:{        length:0   },    a: FD}步骤 1-3：扫描变量申明,发现AO中曾经存在了a属性，则跳过，不影响已存在的属性。AO={   arguments:{        length:0   },    a: FD}执行阶段：步骤 2-1：执行第一行语句console，此时a指向的是函数申明，所以输入函数申明。AO={   arguments:{        length:0   },    a: FD}步骤 2-2：执行第二句对AO中的变量对象进行赋值，所以a的值改为10。AO={   arguments:{        length:0   },    a: 10}步骤 2-3：执行第三句，是函数申明，在执行阶段不会再将其增加到AO中，间接跳过。所以AO还是上次的状态。AO={   arguments:{        length:0   },    a: 10}步骤 2-4：执行第四句，此时a的值是10，所以输入10。AO={   arguments:{        length:0   },    a: 10}

依据以上的示例，咱们曾经大抵明确了EC以及EC的生命周期。

同时，咱们晓得函数每次调用都会产生一个新的函数执行上下文。

那么，如果有若干个执行上下文呢，JavaScript是怎么执行的？

这就波及到 执行上下文栈 的相干常识。

六、执行上下文栈

1. 术语了解

执行上下文栈（Execution context stack，ECS），简称ECS。

简略了解就是若干个执行上下文组成了执行上下文栈。也称为执行栈、调用栈。

2. 作用

用来存储代码执行期间的所有上下文。

3. 特点

咱们晓得栈的特点是先进后出。能够了解为瓶子，先进来的货色永远在最底部。

所以

执行上下文栈的特点就是LIFO（Last In First Out）
也就是后进先出。

4. 存储机制

  1. JS首次执行时，会将全局执行上下文存入栈底，所以全局执行上下文永远在最底部。
  2. 当有函数调用时，会创立一个新的函数执行上下文存入执行栈。

  3. 永远是栈顶处于以后正在执行状态，执行实现后出栈，开始执行下一个。

    5. 示例剖析

    咱们用代码简略了解一下

示例1：

function f1(){    f2();    console.log(1)}function f2(){    f3();    console.log(2)}function f3(){    console.log(3)}f1(); // 3 2 1

依据执行栈的特点进行剖析：

（1）咱们假如执行上下文栈是数组ECStack，则ECStack=[globalContext]，存入全局执行上下文（咱们暂且叫它globalStack）

（2）调用f1()函数，进入f1函数开始执行，创立f1的函数执行上下文，存入执行栈，即ECStack.push('f1 context')

（3）f1函数外部调用了f2()函数，则创立f2的函数执行上下文，存入执行栈，即ECStack.push('f2 context')，f2执行实现之前，f1无奈执行console语句

（4）f2函数外部调用了f3()函数，则创立f3的函数执行上下文，存入执行栈，即ECStack.push('f3 context')，f3执行实现之前，f2无奈执行console语句

（5）f3执行实现，输入3，并出栈，ECStack.pop()

（6）f2执行实现，输入2，并出栈ECStack.pop()

（7）f1执行实现，输入1，并出栈ECStack.pop()

（8）最初ECStack只剩[globalContext]全局执行上下文

示例2：

function foo(i){    if(i == 3){        return     }    foo(i+1);    console.log(i) }foo(0); // 2,1,0

剖析：

（1）调用foo函数，创立foo函数的函数执行上下文，存入EC，传0，i=0，if条件不满足不执行，

（2）执行到foo(1)，再次调用foo函数，创立一个新的函数执行上下文，存入EC，此时传入的i为1，if条件不满足不执行，

（3）又执行到foo(2)，又创立新的函数执行上下文，存入EC，此时i为2，if条件不满足不执行

（3）又执行到foo(3),再次创立新的函数执行上下文，存入EC，此时i为3，if满足间接退出，EC弹出foo(3)

（4）EC弹出foo(3)后执行foo(2)剩下的代码，输入2，foo(2)执行实现，EC弹出foo(2)

（5）EC弹出foo(2)后执行foo(1)剩下的代码，输入1，foo(1)执行实现，EC弹出foo(1)

（6）EC弹出foo(1)后执行foo(0)剩下的代码，输入0，foo(0)执行实现，EC弹出foo(0),此时EC只剩下全局执行上下文。

七、总结

  1. 全局执行上下文只有一个，并且在栈底。
  2. 当浏览器敞开时，全局执行上下文才会出栈。
  3. 函数执行上下文能够有多个，并且函数每调用执行一次（即便是调用本身），就会生成一个新的函数执行上下文。
  4. Js是单线程，所以是同步执行，执行上下文栈中，永远是处于栈顶的是执行状态。
  5. VO或是AO只有一个，创立过程的程序是：参数申明>函数申明>变量申明
  6. 每个EC能够形象为一个对象，这个对象蕴含三个属性：作用域链、VO/AO、this