[译]执行上下文、做用域链和JS内部机制

时间 2020-05-11

原文原文链接

执行上下文、做用域链和JS内部机制（Execution context, Scope chain and JavaScript internals）javascript

1、执行上下文

执行上下文（Execution context EC）是js代码的执行环境，它包括 this的值、变量、对象和函数。

js执行上下文有3种类型

1. 全局执行上下文（Global execution context GEC）

全局上下文是文件第一次加载到浏览器，js代码开始执行的默认执行上下文。在浏览器环境中，严格模式下this的值为undefined，不然this的值为window对象。GEC只能有一个（由于js执行的全局环境只能有一个）。java

2. 函数执行上下文（Functional execution context FEC）

函数执行时建立函数执行上下文，每一个函数都有本身的执行上下文。FEC能够获取到GEC中的内容。当在全局上下文中执行代码时js引擎发现一个函数调用，则建立一个函数执行上下文。浏览器

3. Eval

执行eval时建立ide

2、执行上下文栈

执行上下文栈Execution context stack (ECS)是执行js代码时建立的执行栈结构。 GEC默认在栈的最里层，当js引擎发现一个函数调用，则建立这个函数的 FEC并push进栈，js引擎执行栈顶上下文关联的函数，一旦函数执行完，则将其 FEC pop出栈，并往下执行。

看个例子（动图插不了栈动图连接）函数

var a = 10;

function functionA() {

    console.log("Start function A");

    function functionB(){
        console.log("In function B");
    }

    functionB();

}

functionA();

console.log("GlobalContext");

当上面的代码在浏览器中加载时，js引擎先将GEC push入ECS中，当在GEC中调用functionA时，functionA执行上下文被push入栈，并开始执行functionA。
当functionB在functionA中被调用时，functionB的执行上下文被push入栈，开始执行functionB，当functionB中内容执行完，functionB执行上下文被pop出栈，此时栈顶为functionA的执行上下文，继续执行functionA的代码，执行完后pop出栈，栈顶为GEC。
最终执行GEC中代码，执行完pop整个代码结束。

上面讨论了js引擎如何处理执行上下文（push和pop），下面讨论js引擎如何建立执行上下文，这个过程分为两个阶段：建立阶段和执行阶段。this

3、建立执行上下文

1. 建立阶段（后面又叫编译阶段）

js引擎调用函数，但函数还没开始执行阶段。

js引擎在这个阶段对整个函数进行一个编译(compile the code)，主要干了下面三件事：code

（1）建立Activation object 或 the variable object（后面就简称它可变对象吧，不知道有没有专业的中文名）

可变对象是包含全部变量、函数参数和内部函数声明信息的特殊对象，它是一个特殊对象且没有__proto__属性。cdn

（2）建立做用域链

一旦可变对象建立完，js引擎就开始初始化做用域链。做用域链是一个当前函数所在的可变对象的列表，其中包括GEC的可变对象和当前函数的可变对象。对象

（3）决定this的值

初始化this的值ip

下面经过一个例子进行说明

function funA (a, b) {
  var c = 3;
  
  var d = 2;
  
  d = function() {
    return a - b;
  }
}


funA(3, 2);

当调用funA和执行funA前的这段时间，js引擎为funA建立了一个executionContextObj以下

executionContextObj = {
 variableObject: {}, // All the variable, arguments and inner function details of the funA
 scopechain: [], // List of all the scopes inside which the current function is
 this // Value of this 
}

可变对象包含参数对象（包含函数参数的细节），声明的变量和函数，以下所示

variableObject = {
  argumentObject : {
    0: a,
    1: b,
    length: 2
  },
  a: 3,
  b: 2
  c: undefined,
  d: undefined then pointer to the function defintion of d
}

argumentObject如上所示
函数中的变量会被初始为undefined，参数也会在可变对象中呈现
若是变量在参数对象中已存在，js引擎选择忽略
js引擎在当前函数中遇到函数定义，会用函数名建立一个属性指向函数定义存储的堆内容

2. 执行阶段

在此阶段，js引擎会重扫一遍函数，用具体的变量的值来更新 可变对象，并执行代码内容。

执行阶段执行完后，可变对象的值以下：

variableObject = {
  argumentObject : {
    0: a,
    1: b,
    length: 2
  },
  a: 3,
  b: 2,
  c: 3,
  d: undefined then pointer to the function defintion of d
}

4、完整的例子

代码以下

a = 1;

var b = 2;

cFunc = function(e) {
  var c = 10;
  var d = 15;
  
  a = 3
  
  function dFunc() {
    var f = 5;
  }
  
  dFunc();
}

cFunc(10);

全局编译阶段

当浏览器加载上面的代码后，js引擎进入编译阶段，只处理声明，不处理值。下面走读一遍代码：

a被赋值1，但它并非个变量或函数声明，js引擎在编译阶段什么都不作；
b变量声明初始化为undefined；
cFunc函数声明初始化为undefined。

此时的

globalExecutionContextObj = {
  variableObject: { // 原文中有时用activationObj
      argumentObj : {
          length:0
      },
      b: undefined,
      cFunc: Pointer to the function definition
  },
  scopeChain: [GLobal execution context variable object],
  this: value of this
}

全局执行阶段

再接着上面，js引擎进入执行阶段并再过一遍。此时将会更新变量名和执行

js引擎发现可变对象中没有a属性，所以在GEC中添加a属性，并初始化为1；
可变对象有b，直接更新b的值为2；
接着是函数声明，不作任何事；
最后调用cFunc，js引擎再次进入编译阶段建立一个cFunc的执行上下文。

此时

globalExecutionContextObj = {
  variableObject: {
      argumentObj : {
          length:0
      },
      b: 2,
      cFunc: Pointer to the function definition,
      a: 1
  },
  scopeChain: [GLobal execution context variable object],
  this: value of this
}

cFunc的编译阶段

因为cFunc有个参数e，js引擎会在cFunc执行上下文对象可变对象添加e属性，并初始化为2

js引擎查看cFunc执行上下文的可变对象没有c，所以添加c，并初始化为undefined，d相似；
a = 3非声明，跳过；
函数声明，建立dFunc属性指向函数的堆空间；
对dFunc执行语句忽略

此时

cFuncExecutionContextObj = {
  activationbj: {
      argumentObj : {
          0: e,
          length:1
      },
      e: 10,
      c: undefined,
      d: undefined
      dFunc: Pointer to the function definition,
  },
  scopeChain: [cFunc variable object, Global exection context variable object],
  this: value of this
}

cFunc的执行阶段

c和d获取到初始化值；
a不是cFunc执行上下文对象中的属性，js引擎会在做用率链的帮助下转到GEC（全局执行上下文），查找a是否在GEC中。若是不存在，则会在当前做用域建立并初始化它；若是GEC中有，则更新其值，这里会更新为3。js引擎只有在发现一个变量在当前执行上下文对象属性中找不到时会跳转到GEC中；
建立dFunc属性并指向函数的堆内存

cFuncExecutionContextObj = {
  activationbj: {
      argumentObj : {
          0: e,
          length:1
      },
      e: 10,
      c: 10,
      d: 15
      dFunc: Pointer to the function definition,
  },
  scopeChain: [cFunc variable object, Global exection context variable object],
  this: value of this
}

调用dFunc，js引擎再次进入编译阶段，建立dFunc执行上下文对象。
dFunc执行上下文对象能够访问到cFunc和全局做用域中的全部变量和函数；一样cFunc能够访问到全局的，但不能访问dFunc中的；全局上下文对象不能访问cFunc和dFunc中的变量和对象。
有了上面的概念，对hoisting（变量提高）应该更容易理解了。

5、做用域链

做用域链是当前函数所在的可变对象列表

看下面一段代码

a = 1;

var b = 2;

cFunc = function(e) {
  var c = 10;
  var d = 15;
  
  console.log(c);
  console.log(a); 
  
  function dFunc() {
    var f = 5;
    console.log(f)
    console.log(c);
    console.log(a); 
  }
  
  dFunc();
}

cFunc(10);

当cFunc被调用时，cFunc的做用域链以下

Scope chain of cFunc = [ cFunc variable object, 
                     Global Execution Context variable object]

当dFunc被调用时，dFunc在cFunc中，dFunc的做用域链包含dFunc、cFunc和全局可变对象

Scope chain of dFunc = [dFunc variable object, 
                    cFunc variable object,
                    Global execution context variable object]

当咱们尝试访问dFunc中的f，js引擎查看f是否可从dFunc的可变对象中获取，找到console输出；
访问c变量，js引擎首先在dFunc的可变对象中获取，不能获取，则到cFunc的可变对象中去获取，找到console输出；
访问a变量，同上，最后找到GEC的可变对象，获取到并console输出

一样，cFunc中获取c和a相似

在cFunc中访问不到f变量，但dFunc中能够经过做用域链获取到c和d