JS执行上下文与调用栈

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

什么是执行上下文？

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

执行上下文的类型

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

• 全局执行上下文 — 这是默认或者说基础的上下文，任何不在函数内部的代码都在全局上下文中。它会执行两件事：创建一个全局的 window 对象（浏览器的情况下），并且设置 this 的值等于这个全局对象。一个程序中只会有一个全局执行上下文。

• 函数执行上下文 — 每当一个函数被调用时, 都会为该函数创建一个新的上下文。每个函数都有它自己的执行上下文，不过是在函数被调用时创建的。函数上下文可以有任意多个。每当一个新的执行上下文被创建，它会按定义的顺序（将在后文讨论）执行一系列步骤。

• Eval 函数执行上下文 — 执行在 eval 函数内部的代码也会有它属于自己的执行上下文，但由于 JavaScript 开发者并不经常使用 eval，所以在这里我不会讨论它。

调用栈

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

• 当脚本要调用一个函数时，解析器把该函数添加到栈中并且执行这个函数。

• 任何被这个函数调用的函数会进一步添加到调用栈中，并且运行到它们被上个程序调用的位置。

• 当函数运行结束后，解释器将它从堆栈中取出，并在主代码列表中继续执行代码。

• 如果栈占用的空间比分配给它的空间还大，那么则会导致“栈溢出”错误。

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

1. function greeting() {

2.   // [1] Some codes here

3.   sayHi();

4.   // [2] Some codes here

5. }

6. function sayHi() {

7.   return "Hi!";

8. }

9. // 调用 `greeting` 方法

10. greeting();

11. // [3] Some codes here

上面的代码将这样执行:

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

1. 调用栈列表:

2. - greeting

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

1. 调用栈列表:

2. - greeting

3. - sayHi

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

1. 调用栈列表:

2. - greeting

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

1. 调用栈列表:

2. 空

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

怎么创建执行上下文？

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

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

The Creation Phase

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

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

2. 创建词法环境组件。

3. 创建变量环境组件。

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

1. ExecutionContext = {

2.  ThisBinding = <this value>,

3.  LexicalEnvironment = { ... },

4.  VariableEnvironment = { ... },

5. }

This 绑定：

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

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

1. let foo = {

2.  baz: function() {

3.  console.log(this);

4.  }

5. }

6. foo.baz();   // 'this' 引用 'foo', 因为 'baz' 被

7.             // 对象 'foo' 调用

8. let bar = foo.baz;

9. bar();       // 'this' 指向全局 window 对象，因为

10.             // 没有指定引用对象

词法环境

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

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

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

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

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

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

词法环境有两种类型：

• 全局环境（在全局执行上下文中）是没有外部环境引用的词法环境。全局环境的外部环境引用是 null。它拥有内建的 Object/Array/等、在环境记录器内的原型函数（关联全局对象，比如 window 对象）还有任何用户定义的全局变量，并且 this的值指向全局对象。

• 在函数环境中，函数内部用户定义的变量存储在环境记录器中。并且引用的外部环境可能是全局环境，或者任何包含此内部函数的外部函数。

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

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

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

简而言之，

• 在全局环境中，环境记录器是对象环境记录器。

• 在函数环境中，环境记录器是声明式环境记录器。

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

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

1. GlobalExectionContext = {

2.  LexicalEnvironment: {

3.    EnvironmentRecord: {

4.      Type: "Object",

5.      // 在这里绑定标识符

6.    }

7.    outer: <null>

8.  }

9. }

10. FunctionExectionContext = {

11.  LexicalEnvironment: {

12.    EnvironmentRecord: {

13.      Type: "Declarative",

14.      // 在这里绑定标识符

15.    }

16.    outer: <Global or outer function environment reference>

17.  }

18. }

变量环境：

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

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

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

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

1. let a = 20;

2. const b = 30;

3. var c;

4. function multiply(e, f) {

5. var g = 20;

6. return e * f * g;

7. }

8. c = multiply(20, 30);

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

1. GlobalExectionContext = {

2.  ThisBinding: <Global Object>,

3.  LexicalEnvironment: {

4.    EnvironmentRecord: {

5.      Type: "Object",

6.      // 在这里绑定标识符

7.      a: < uninitialized >,

8.      b: < uninitialized >,

9.      multiply: < func >

10.    }

11.    outer: <null>

12.  },

13.  VariableEnvironment: {

14.    EnvironmentRecord: {

15.      Type: "Object",

16.      // 在这里绑定标识符

17.      c: undefined,

18.    }

19.    outer: <null>

20.  }

21. }

22. FunctionExectionContext = {

23.  ThisBinding: <Global Object>,

24.  LexicalEnvironment: {

25.    EnvironmentRecord: {

26.      Type: "Declarative",

27.      // 在这里绑定标识符

28.      Arguments: {0: 20, 1: 30, length: 2},

29.    },

30.    outer: <GlobalLexicalEnvironment>

31.  },

32. VariableEnvironment: {

33.    EnvironmentRecord: {

34.      Type: "Declarative",

35.      // 在这里绑定标识符

36.      g: undefined

37.    },

38.    outer: <GlobalLexicalEnvironment>

39.  }

40. }

注意 — 只有遇到调用函数 multiply 时，函数执行上下文才会被创建。

可能你已经注意到 let 和 const 定义的变量并没有关联任何值，但 var 定义的变量被设成了 undefined。

这是因为在创建阶段时，引擎检查代码找出变量和函数声明，虽然函数声明完全存储在环境中，但是变量最初设置为 undefined（ var 情况下），或者未初始化（ let 和 const 情况下）。

这就是为什么你可以在声明之前访问 var 定义的变量（虽然是 undefined），但是在声明之前访问 let 和 const 的变量会得到一个引用错误。

这就是我们说的变量声明提升。

执行阶段

这是整篇文章中最简单的部分。在此阶段，完成对所有这些变量的分配，最后执行代码。

注意 — 在执行阶段，如果 JavaScript 引擎不能在源码中声明的实际位置找到 let 变量的值，它会被赋值为 undefined。

结论

我们已经讨论过 JavaScript 程序内部是如何执行的。虽然要成为一名卓越的 JavaScript 开发者并不需要学会全部这些概念，但是如果对上面概念能有不错的理解将有助于你更轻松，更深入地理解其他概念，如变量声明提升，作用域和闭包。

精彩回顾

♡ 互联网公司各岗位真实工作内容起底

♡ 一次尴尬的采访和程序员的传奇脑洞！

♡ 天一冷，程序员都穿上格子衫

♡ 史上最真实的行业鄙视链曝光

♡ IT公司老板落水，各部门员工怎么救

♡ 宿命之战：程序员VS产品经理

♡ 作为一个前端，可以如何机智地弄坏一台电脑？

♡ 程序员跟产品经理打起来了，这是一个需求引发的血案...

♡ 后端说，你个前端不会用 headers吧，我怒了！

♡ 有个厉害的程序员女朋友是什么体验？

♡ 多年来，程序员经常加班的真相终于揭开了…

♡ 如果编程替换成中文就会怎样? 程序员看了表示头疼