执行上下文与调用栈：理解 JavaScript 运行时

执行上下文和调用栈

执行上下文（Execution Context）和调用栈（Call Stack）是理解 JavaScript 运行时必不可少的两个概念。它们揭示了代码的执行顺序和环境，对于调试、优化和理解程序行为至关重要。

执行上下文

执行上下文是代码执行的上下文环境。它定义了变量和函数的可用性、作用域以及代码的执行环境。每个函数都有自己的执行上下文，称为局部执行上下文（local execution context）。

局部执行上下文包含：

• 变量对象（Variable Object）： 存储局部变量和函数的参数。
• 作用域链（Scope Chain）： 用于查找变量和函数的作用域。
• **this ** 指向当前执行函数的对象。

调用栈

调用栈是一个 LIFO（后进先出）的数据结构，它跟踪 JavaScript 函数的执行顺序。每次函数被调用时，它都会被推入调用栈。当函数执行完毕时，它将从调用栈中弹出。

调用栈存储了以下信息：

• 当前执行函数： 位于栈顶。
• 函数的参数： 存储在局部执行上下文中。
• 返回地址： 函数执行完毕后需要返回的位置。

执行流程

当 JavaScript 代码执行时，它会经历以下过程：

1. 创建全局执行上下文： 这是程序启动时的第一个执行上下文。
2. 执行全局代码： 在全局执行上下文中执行代码。
3. 调用函数： 当调用一个函数时，一个新的局部执行上下文被创建并推入调用栈。
4. 执行函数： 函数代码在局部执行上下文中执行。
5. 函数返回： 当函数执行完毕时，它的执行上下文从调用栈中弹出。
6. 恢复执行： 控制权返回到调用函数的执行上下文。

示例

以下代码示例演示了执行上下文和调用栈：

function foo() {
  var a = 10;
  bar();
}

function bar() {
  var b = 20;
  console.log(a + b); // 30
}

foo();

在这个示例中，foo() 函数调用栈如下：

foo()  
bar()

局部执行上下文如下：

• foo()：包含变量 a 和 this （指向全局对象）。
• bar()：包含变量 b 和 this 关键字（指向 foo() 的执行上下文）。

结论

了解执行上下文和调用栈对于理解 JavaScript 运行时的行为至关重要。它们揭示了代码的执行顺序、变量的作用域以及错误处理和调试的机制。通过掌握这些概念，开发人员可以编写更健壮、可维护和可调试的 JavaScript 代码。