（每日一题）什么是执行上下文？-起源网创项目

本文分享了 JavaScript 基础的两个方面：执行上下文和调用堆栈。每当 JavaScript 代码运行时，它都在执行上下文中运行；调用栈则可以在脚本调用多个函数时，跟踪每个函数在完成执行时应该返回的控制点。

什么是执行上下文？

简而言之，执行上下文是评估和执行 JavaScript 代码的环境的抽象概念。每当 Javascript 代码在运行的时候，它都是在执行上下文中运行。

执行上下文的类型

JavaScript 中有三种执行上下文类型。

调用栈

调用栈是解析器(如浏览器中的的javascript解析器)的一种机制，可以在脚本调用多个函数时创业项目，跟踪每个函数在完成执行时应该返回控制的点。（如什么函数正在执行，什么函数被这个函数调用，下一个调用的函数是谁）

让我们来看看这个实例，代码如下：

function greeting() {
   // [1] Some codes here
   sayHi();
   // [2] Some codes here
}
function sayHi() {
   return "Hi!";
}
// 调用 `greeting` 方法
greeting();
// [3] Some codes here

上面的代码将这样执行:

1.忽略所有的方法, 直到到达 greeting()方法。2.调用 greeting()方法。3.把 `greeting` 方法加入调用栈列表。

调用栈列表:
- greeting

4.执行 `greeting` 方法中的所有代码行。5.到达 sayHi()方法。6.把 sayHi()方法加入调用栈列表。

调用栈列表:
- greeting
- sayHi

7.执行 sayHi()函数中的所有代码行，直到结束。8.将执行返回到调用 sayHi()的行，并继续执行 greeting()函数的其余部分。9.把 sayHi()方法从调用栈列表中删除。

调用栈列表:
- greeting

10.当 greeting()函数中的所有内容都执行完之后，返回到它的调用行继续执行其余的JS代码。11.把 greeting()方法从调用栈列表中删除。

调用栈列表:
空

我们从一个空的调用栈开始，当我们调用一个函数时，它会自动添加到调用栈中，在执行完所有代码之后，它会自动从调用栈中删除。最后，我们也得到了一个空栈。

怎么创建执行上下文？

到现在，我们已经看过 JavaScript 怎样管理执行上下文了，现在让我们了解 JavaScript 引擎是怎样创建执行上下文的。

创建执行上下文有两个阶段：1) 创建阶段和 2) 执行阶段。

The Creation Phase

在 JavaScript 代码执行前，执行上下文将经历创建阶段。在创建阶段会发生三件事：

this值的决定，即我们所熟知的This 绑定。

创建词法环境组件。

创建变量环境组件。

所以执行上下文在概念上表示如下：

ExecutionContext = {
  ThisBinding = <this value>,
  LexicalEnvironment = { ... },
  VariableEnvironment = { ... },
}

This 绑定：

在全局执行上下文中， this 的值指向全局对象。(在浏览器中， this引用 Window 对象)。

在函数执行上下文中， this 的值取决于该函数是如何被调用的。如果它被一个引用对象调用，那么 this会被设置成那个对象，否则 this 的值被设置为全局对象或者 undefined（在严格模式下）。例如：

let foo = {
  baz: function() {
  console.log(this);
  }
}
foo.baz();   // 'this' 引用 'foo', 因为 'baz' 被
             // 对象 'foo' 调用
let bar = foo.baz;
bar();       // 'this' 指向全局 window 对象，因为
             // 没有指定引用对象

词法环境

官方的 ES6 文档把词法环境定义为

词法环境是一种规范类型，基于 ECMAScript 代码的词法嵌套结构来定义标识符和具体变量和函数的关联。一个词法环境由环境记录器和一个可能的引用外部词法环境的空值组成。

简单来说词法环境是一种持有标识符—变量映射的结构。（这里的标识符指的是变量/函数的名字，而变量是对实际对象[包含函数类型对象]或原始数据的引用）。

现在执行上下文，在词法环境的内部有两个组件：(1) 环境记录器和 (2) 一个外部环境的引用。

环境记录器是存储变量和函数声明的实际位置。

外部环境的引用意味着它可以访问其父级词法环境（作用域）。

词法环境有两种类型：

环境记录器也有两种类型（如上！）：

声明式环境记录器存储变量、函数和参数。

对象环境记录器用来定义出现在全局上下文中的变量和函数的关系。

简而言之，

注意 — 对于函数环境，声明式环境记录器还包含了一个传递给函数的 arguments 对象（此对象存储索引和参数的映射）和传递给函数的参数的 length。

抽象地讲，词法环境在伪代码中看起来像这样：

GlobalExectionContext = {
  LexicalEnvironment: {
    EnvironmentRecord: {
      Type: "Object",
      // 在这里绑定标识符
    }
    outer: <null>
  }
}
FunctionExectionContext = {
  LexicalEnvironment: {
    EnvironmentRecord: {
      Type: "Declarative",
      // 在这里绑定标识符
    }
    outer: <Global or outer function environment reference>
  }
}

变量环境：

它同样是一个词法环境，其环境记录器持有变量声明语句在执行上下文中创建的绑定关系。

如上所述，变量环境也是一个词法环境，所以它有着上面定义的词法环境的所有属性。

在 ES6 中，词法环境组件和变量环境的一个不同就是前者被用来存储函数声明和变量（ let 和 const）绑定，而后者只用来存储 var 变量绑定。

我们看点样例代码来理解上面的概念：

let a = 20;
const b = 30;
var c;
function multiply(e, f) {
 var g = 20;
 return e * f * g;
}
c = multiply(20, 30);

执行上下文看起来像这样：

GlobalExectionContext = {
  ThisBinding: <Global Object>,
  LexicalEnvironment: {
    EnvironmentRecord: {
      Type: "Object",
      // 在这里绑定标识符
      a: < uninitialized >,
      b: < uninitialized >,
      multiply: < func >
    }
    outer: <null>
  },
  VariableEnvironment: {
    EnvironmentRecord: {
      Type: "Object",
      // 在这里绑定标识符
      c: undefined,
    }
    outer: <null>
  }
}
FunctionExectionContext = {
  ThisBinding: <Global Object>,
  LexicalEnvironment: {
    EnvironmentRecord: {
      Type: "Declarative",
      // 在这里绑定标识符
      Arguments: {0: 20, 1: 30, length: 2},
    },
    outer: <GlobalLexicalEnvironment>
  },
VariableEnvironment: {
    EnvironmentRecord: {
      Type: "Declarative",
      // 在这里绑定标识符
      g: undefined
    },
    outer: <GlobalLexicalEnvironment>
  }
}