关于前端:温故而知新-重新认识JavaScript的Execution-Context

更新下相干常识，立足过往，拥抱将来。

概念

间接看标准对于ExecutionContext的定义：

An execution context is a specification device that is used to track the runtime evaluation of code by an ECMAScript implementation.

ExecutionContext为抽象概念，用来形容可执行代码的执行环境。可执行代码的运行，都是在ExecutionContext中。

治理形式`ExecutionContextStack`

Execution context Stack为后进先出（LIFO）的栈构造。栈顶永远是running execution context。当管制从以后execution context对应可执行代码转移到另一段可执行代码时，相应的execution context将被创立，并压入栈顶，执行完结，对应的execution context从栈顶弹出。

考虑：什么`ECMAScript`个性会使`Execution context stack`不遵循`LIFO`规定？

标准外面提到：

Transition of the running execution context status among execution contexts usually occurs in stack-like last-in/first-out manner. However, some ECMAScript features require non-LIFO transitions of the running execution context.

而后在标准外面，并没有找到some ECMAScript features到底是什么个性。不过，第一反馈，Generator算不算？在stackoverflow上，有这么一个探讨Execution Context Stack. Violation of the LIFO order using Generator Function

function *gen() {  yield 1;  return 2;}let g = gen();console.log(g.next().value);console.log(g.next().value);

调用一个函数时，以后execution context暂停执行，被调用函数的execution context创立并压入栈顶，当函数返回时，函数execution context被销毁，暂停的execution context得以复原执行。

当初，应用的是Generator，Generator函数的execution context在返回yield表达式的值之后依然存在，并未销毁，只是暂停并移交出了控制权，可能在某些时候复原执行。

到底是不是呢？有待求证。

词法环境`Lexical Environments`

看标准的定义：

A Lexical Environment is a specification type used to define the association of Identifiers to specific variables and functions based upon the lexical nesting structure of ECMAScript code.

按标准来说，Lexical Environment定义了标识identifiers与Variables或Functions的映射。

组成 `Lexical Environment`蕴含两局部：

Environment Record
记录被创立的标识identifiers与Variables或Functions的映射

类型	简述
Declarative Environment Records	记录 `var`、`const`、`let`、`class`、`import`、`function`等申明
Object Environment Records	与某对象绑定，记录该对象中`string identifier`的属性，非`string identifier`的属性不会被记录。`Object environment records`为`with`语句所创立
Function Environment Records	`Declarative Environment Records`的一种，用于函数的顶层，如果为非箭头函数的状况，提供`this`的绑定，若还援用了 `super`则提供`super`办法的绑定
Global Environment Records	蕴含所有顶层申明及`global object`的属性，`Declarative Environment Records`与`Object Environment Records`的组合
Module Environment Records	`Declarative Environment Records`的一种，用于`ES module`的顶层，除去常量和变量的申明，还蕴含不可变的`import`的绑定，该绑定提供了到另一`environment records`的间接拜访

内部Lexical Environment的援用
通过援用形成了嵌套构造，援用可能为null

分类 `Lexical Environment`分三类：

Global Environment
没有内部Lexical Environment的Lexical Environment
Module Environment
蕴含了模块顶层的申明以及导入的申明，内部Lexical Environment为Global Environment
Function Environment
对应于JavaScript中的函数，其会建设this的绑定以及必要的super办法的绑定

变量环境`Variable Environments`

在ES6前，申明变量都是通过var申明的，在ES6后有了let和const进行申明变量，为了兼容var，便用Variable Environments来存储var申明的变量。

Variable Environments本质上仍为Lexical Environments

机制

具体能够参考标准ECMAScript 2019 Language Specification。相干的是在8.3 Execution Contexts。

一篇很不错的文章参考Understanding Execution Context and Execution Stack in Javascript，该文章的中文翻译版中文版

参考外面的例子：

var a = 20;var b = 40;let c = 60;function foo(d, e) {    var f = 80;        return d + e + f;}c = foo(a, b);

创立的Execution Context像这样：

GlobalExecutionContext = {  LexicalEnvironment: {    EnvironmentRecord: {      Type: "Object",      c: < uninitialized >,      foo: < func >    }    outer: <null>,    ThisBinding: <Global Object>  },  VariableEnvironment: {    EnvironmentRecord: {      Type: "Object",      // Identifier bindings go here      a: undefined,      b: undefined,    }    outer: <null>,     ThisBinding: <Global Object>  }}

在运行阶段，变量赋值曾经实现。因而GlobalExecutionContext在执行阶段看起来就像是这样的：

GlobalExecutionContext = {  LexicalEnvironment: {    EnvironmentRecord: {      Type: "Object",      c: 60,      foo: < func >,    }    outer: <null>,    ThisBinding: <Global Object>  },  VariableEnvironment: {    EnvironmentRecord: {      Type: "Object",      // Identifier bindings go here      a: 20,      b: 40,    }    outer: <null>,     ThisBinding: <Global Object>  }}

当遇到函数foo(a, b)的调用时，新的FunctionExecutionContext被创立并执行函数中的代码。在创立阶段像这样：

FunctionExecutionContext = {  LexicalEnvironment: {    EnvironmentRecord: {      Type: "Declarative",      Arguments: {0: 20, 1: 40, length: 2},    },    outer: <GlobalLexicalEnvironment>,    ThisBinding: <Global Object or undefined>,  },  VariableEnvironment: {    EnvironmentRecord: {      Type: "Declarative",      f: undefined    },    outer: <GlobalLexicalEnvironment>,    ThisBinding: <Global Object or undefined>,  }}

执行完后，看起来像这样：

FunctionExecutionContext = {  LexicalEnvironment: {    EnvironmentRecord: {      Type: "Declarative",      Arguments: {0: 20, 1: 40, length: 2},    },    outer: <GlobalLexicalEnvironment>,    ThisBinding: <Global Object or undefined>,  },  VariableEnvironment: {    EnvironmentRecord: {      Type: "Declarative",      f: 80    },    outer: <GlobalLexicalEnvironment>,    ThisBinding: <Global Object or undefined>,  }}

在函数执行实现当前，返回值会被存储在c里。因而GlobalExecutionContext更新。在这之后，代码执行实现，程序运行终止。

总结

ECMAScript标准是年年都在更新，得与时俱进的增强学习，立足过往及当下，拥抱将来！

参考资料

所有的函式都是閉包：談 JS 中的作用域與 Closure
JS夯实之执行上下文与词法环境
联合 JavaScript 标准来谈谈 Execution Contexts 与 Lexical Environments
You-Dont-Know-JS 2nd-ed
ECMAScript 2019 Language Specification
Understanding Execution Context and Execution Stack in Javascript

概念

治理形式ExecutionContextStack

考虑：什么ECMAScript个性会使Execution context stack不遵循LIFO规定？

词法环境Lexical Environments

组成 Lexical Environment蕴含两局部：

分类 Lexical Environment分三类：

变量环境Variable Environments

机制

总结