解构执行上下文与调用栈：理解作用域、闭包和变量生命周期

引子

程序执行的幕后机制错综复杂，其中最基本的要素之一就是执行上下文。它是一个动态环境，存储着正在执行的代码的信息，包括局部变量、函数参数和对外部作用域的引用。了解执行上下文和调用栈对于理解变量作用域、闭包和函数执行至关重要。

执行上下文

在 JavaScript 中，每当一个函数被调用时，就会创建一个新的执行上下文。这个上下文包含以下信息：

• 局部变量：在函数内声明的变量。
• 函数参数：传递给函数的变量。
• 作用域链：指向包含当前执行上下文的外部作用域的引用链。

调用栈

调用栈是一个后进先出（LIFO）数据结构，它跟踪正在执行的函数。当一个函数被调用时，它会被推入调用栈的顶部。当函数返回时，它会被从栈中弹出。

作用域

作用域定义了变量的可见性。在 JavaScript 中，变量的作用域由其声明的位置决定：

• 全局作用域： 在脚本的顶层声明的变量具有全局作用域，可以在脚本中的任何位置访问。
• 局部作用域： 在函数内声明的变量具有局部作用域，只能在该函数内访问。

闭包

闭包是一个函数，可以访问另一个函数的作用域链中的变量。换句话说，它可以访问其创建环境中声明的变量，即使它已经离开了该环境。闭包是理解 JavaScript 中变量生命周期和数据封装的关键。

如何理解执行上下文与调用栈

要理解执行上下文与调用栈，考虑以下代码示例：

function outer() {
  let outerVar = "Outer Variable";

  function inner() {
    let innerVar = "Inner Variable";
    console.log(outerVar); // 输出: "Outer Variable"
  }

  inner();
}

outer();

执行过程：

1. outer 函数被调用，创建一个新的执行上下文。
2. 在 outer 执行上下文中声明的变量 outerVar 被赋值为 "Outer Variable"。
3. inner 函数被调用，创建一个新的执行上下文，嵌套在 outer 执行上下文中。
4. 在 inner 执行上下文中声明的变量 innerVar 被赋值为 "Inner Variable"。
5. inner 执行上下文具有指向 outer 执行上下文的引用，因此它可以访问变量 outerVar。
6. inner 函数返回，inner 执行上下文被销毁。
7. outer 函数返回，outer 执行上下文被销毁。

理解作用域链

执行上下文之间的引用链称为作用域链。它允许内部作用域访问外部作用域中的变量。在上面的示例中，inner 执行上下文的作用域链如下：

1. inner 执行上下文
2. outer 执行上下文
3. 全局执行上下文

结论

执行上下文和调用栈是 JavaScript 程序执行的核心概念。通过理解它们之间的关系，我们可以更好地理解作用域、闭包和变量生命周期。这对于编写健壮、可维护的代码至关重要。