理解JavaScript 之执行上下文和执行栈

执行上下文

简而言之,执行上下文就是评估和执行JavaScript代码的环境的抽象概念.

执行上下文类型

• 全局执行上下文

默认或者说基础的上下文，任何不在函数内部的代码都在全局上下文中。

它会执行两件事：

1. 创建一个全局的window对象（浏览器下）
2. 设置this的值等于这个全局对象

一个程序只有一个全局执行上下文。

• 函数执行上下文

每当一个函数被调用时，都会为该函数创建一个新的执行上下文。每个函数都有自己的执行上下文，仅在函数被调用时创建。

函数执行上下文可以有任意多个。

每当一个新的执行上下文被创建，它会按定义顺序执行一系列步骤。

• Eval函数执行上下文

执行eval函数内部的胆码也会有它自己的执行上下文，不常用

执行栈

执行栈，也就是调用栈，是一种拥有LIFO（后进先出）数据结构的栈，被用来存储代码运行时创建的所有执行上下文。

当JavaScript引擎第一次遇到脚本时，它会创建一个全局的执行上下文并压入当前执行栈。每当引擎遇到一个函数调用，它会为该函数创建一个新的执行上下文并压入栈的顶部。

引擎会执行那些执行上下文对于栈顶的函数，当该函数执行结束，执行上下文从栈中弹出，控制流程到达当前栈中的下一个上下文。    

let a = 'Hello World!';

function first() {
  console.log('Inside first function');
  second();
  console.log('Again inside first function');
}

function second() {
  console.log('Inside second function');
}

first();
console.log('Inside Global Execution Context');

1. 当上述代码在浏览器加载时，JavaScript引擎创建了一个全局执行上下文并把它压入当前执行栈。
2. 遇到first（）函数调用时，JavaScript引擎为该函数创建一个新的执行上下文并把它压入当前执行栈的顶部
3. 从first（）函数内部调用second（）时，JavaScript引擎为second（）创建一个新的执行上下文并把它压入当前执行栈顶部
4. second（）执行完毕，它的执行上下文会从当前栈弹出，并且控制流程到达下一个执行上下文，即first（）的执行上下文。
5. 当first（）执行完毕，他的执行上下文从栈弹出，控制流程到达全局执行上下文。当所有代码执行完毕，JavaScript引擎从当前栈中移除全局执行上下文。

怎么创建执行上下文？

创建执行上下文有两个阶段：1、创建阶段 2、执行阶段

创建阶段会发生三件事：

1. this值的决定，即this绑定

2. 创建此法环境组件

3. 创建变量环境组件

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) 一个外部环境的引用。

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

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

词法环境的类型

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

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

环境记录器的类型

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

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

即

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

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

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

变量环境

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

在 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);

PS：只有遇到调用 multiply （）时，函数执行上下文才会被创建。

let 和 const 定义的变量并没有关联任何值，但 var 定义的变量被设成了 undefined。

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

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

执行阶段

在此阶段，完成对所有这些变量的分配，最后执行代码。

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

 

最后，感谢大佬的分享

• 原文地址：Understanding Execution Context and Execution Stack in Javascript
• 原文作者：Sukhjinder Arora
• 译文出自：掘金翻译计划
• 本文永久链接：github.com/xitu/gold-m…
• 译者：CoolRice
• 校对者：linxuesia, CoderMing