轻松理解es6执行上下文

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

前言

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

一 什么是执行上下文

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

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

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

 二 执行上下文的类型

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

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

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

 一 创建阶段

在创建阶段，JavaScript 引擎为执行上下文做准备，主要包括以下几个步骤：

1. 变量对象创建：

   • 创建一个变量对象（Variable Object），用于存储函数内部的变量和函数声明。
   • 对于函数执行上下文，这个变量对象通常被称为活动对象（Activation Object）。
   • 对于全局执行上下文，这个变量对象通常就是全局对象（如浏览器环境中的 window 或 Node.js 环境中的 global）。

2. 变量和函数声明初始化：

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

3. this 绑定：

   • 确定 this 的值。
   • 在全局执行上下文中，this 通常绑定到全局对象。
   • 在函数执行上下文中，this 的值取决于函数是如何被调用的。

4. 确定 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）

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