轻松理解es6执行上下文

想要学好js，深入理解js的如何运行肯定是少不了的。这篇文章是结合各个网站上的大佬们的文章在加上自己的理解形成（结论部分）的，如有错误的地方，请帮我纠正一下，谢谢。

前言

当js引擎去执行一段代码的时候，如何确定代码的执行顺序，以及变量何时被定义，this的指向等，想要更深入理解这些问题，必须了解js执行上下文的概念。

一 什么是执行上下文

执行上下文是 js引擎用来跟踪代码执行状态的环境。每当一个函数被调用前js引擎都会做一些准备工作，做这个准备工作就叫创建执行上下文。这里可以理解执行上下文是一个'盒子'。

这个盒子也相当于一个对象，盒子里有变量对象,this等一些属性,在函数运行时供函数使用。

函数一被调用，函数的执行上下文(盒子)创建后就会被压入执行栈。这个函数执行完后执行上下文(盒子)就会出栈。

 二 执行上下文的类型

执行上文的的类型有三种:

1. 全局执行上下文：这是程序启动时创建的第一个执行上下文。
2. 函数执行上下文：每当调用一个函数时，都会创建一个新的函数执行上下文。
3. Eval 函数执行上下文：使用 eval 函数时会创建。eval函数 是 Js 中的一个内置函数，它接收一串字符串，并将其转为 Js代码来执行。

 三 创建执行上下文阶段和执行阶段

 一 创建阶段

在创建阶段，JavaScript 引擎为执行上下文做准备，主要包括三个阶段1.this绑定,2.创建词法环境3.创建变量环境:

1. This 绑定（决定 this 的值）。

   1. 全局上下文：在全局执行上下文中，this 通常绑定到全局对象（如浏览器环境中的 window 或 Node.js 环境中的 global）。

   2. 普通函数调用：如果函数是作为一个普通的函数调用，this 通常绑定到全局对象（非严格模式下）或 undefined（严格模式下）。

   3. 构造函数调用：如果函数是使用 new 关键字调用的，this 通常绑定到新创建的对象。

   4. 对象方法调用：如果函数是作为某个对象的方法调用的，this 通常绑定到该对象。

   5. 箭头函数：箭头函数没有自己的 this 值，它会继承外围作用域的 this 值。

2. 创建词法环境（Lexical Environment）,由两部分组成:  
   1. 环境记录（Environment Record）：存储变量和函数声明。
   2. 外部环境记录（Outer Environment Record）：指向外部词法环境的引用。
   3. 在创建阶段，词法环境被创建，它负责维护当前执行上下文中的所有变量和函数声明。词法环境确保了作用域链的正确建立。
3. 创建变量环境（Variable Environment）。分为三个步骤:

   1. 创建变量对象：

      • 变量对象（Variable Object）被创建，用于存储局部变量和函数声明。
      • 对于函数执行上下文，变量对象通常被称为活动对象（Activation Object）。

   2. 变量初始化：

      • 所有声明的变量和函数都会被初始化。
      • 变量被初始化为 undefined。
      • 函数声明被完全初始化，函数体被赋值。

   3. arguments 对象：

      • 对于函数执行上下文，还会创建一个 arguments 对象，用于存储传递给函数的所有参数。

二 执行阶段

在执行阶段，JavaScript 引擎开始执行执行上下文中的代码。这个阶段包括：

1. 代码执行：

   • 开始执行上下文中定义的代码。
   • 如果遇到函数调用，将会创建一个新的函数执行上下文并将其压入执行上下文栈。
   • 如果遇到 return 语句或函数执行结束，当前函数执行上下文将从执行上下文栈中弹出，控制权返回给上一个执行上下文。

2. 变量赋值：

   • 在创建阶段初始化的变量现在可以被赋值。

3. 函数调用：

   • 当函数被调用时，会创建一个新的函数执行上下文，并将其压入执行上下文栈。
   • 函数执行上下文的创建阶段和执行阶段会按照上述流程进行。

4. 清理：

   • 当一个执行上下文完成执行后，它会被销毁，释放内存。

过程是这样，但是只看文字描述不够具体，可以先看个简单代码。

let globalVar = 'I am global';

function foo() {
    let localVar = 'I am local';
    console.log(globalVar); // 输出: I am global
    console.log(localVar);  // 输出: I am local
}

foo();

// 调用 foo 函数时，会发生以下事件：
// 1. 创建 foo 函数的执行上下文
// 2. 在创建阶段，初始化变量对象，包括 `localVar` 和 `arguments` 对象
// 3. 在创建阶段，`this` 绑定到全局对象
// 4. 在执行阶段，执行 foo 函数内的代码
// 5. `localVar` 被赋值
// 6. 执行剩余代码,执行完释放
// 7. 控制权返回到全局执行上下文

 这就是一个上下文的创建执行过程了。

三 活动对象（AO）

 执行上下文在创建阶段的变量你对象不能直接访问。当进入了执行阶段，变量对象会变成活动对象，就能够进行访问与操作。活动对象和变量对象是同一个对象，只是在不同阶段名字不一样。

结论

我的理解：函数被调用生成一个上下文并且压入执行栈。上下文在执行栈有两个阶段。创建阶段三步走，this、词法环境、变量环境为执行做准备。执行阶段执行代码后出栈，接着执行下一个函数。其中词法环境的作用：1.变量声明。2.作用域链的建立。3.变量和函数的查找。变量环境的作用：1.变量和函数声明的存储。2.变量初始化。3.参数和 arguments 对象的管理。

所以深入的了解js底层的运行机制，你的对js的理解就越全面，理解越全面，遇到问题就越好解决。