深度剖析执行上下文：深入浅出解构代码执行环境

2024-02-06 15:08:26

在 JavaScript 的浩瀚世界中，执行上下文是代码执行的舞台，它定义了代码运行时的环境。深入理解执行上下文对于编写健壮且可维护的代码至关重要。让我们踏上一次旅程，深入浅出地探索执行上下文的神秘世界。

词法环境：变量的栖息地

词法环境是一种代码块，它决定了变量的可见性。当代码进入词法环境时，它可以访问在该环境中声明的所有变量。当代码离开该环境时，这些变量就会消失。换句话说，词法环境为变量提供了一个受保护的空间。

变量环境：变量的当前值

变量环境是词法环境的子集，它保存着变量的当前值。当变量在词法环境中声明时，它在变量环境中会被赋予一个值。随着代码的执行，变量的值可以在不同的变量环境中发生变化。

执行上下文：代码执行的舞台

执行上下文将词法环境和变量环境结合在一起，为代码的执行提供了一个完整而动态的环境。它定义了哪些变量可见、它们的当前值是什么，以及代码在执行时如何处理。每个函数调用都会创建自己的执行上下文，它会压入执行上下文栈中。当函数调用返回时，它会从栈中弹出。

执行上下文的生命周期

执行上下文的生命周期分为两个阶段：创建和激活。

创建： 当一个函数被调用或全局代码开始执行时，一个新的执行上下文被创建。该上下文包含词法环境、变量环境和一个指向当前激活执行上下文的链接。
激活： 当代码进入一个执行上下文时，它会成为当前激活的执行上下文。在执行上下文中执行的任何代码都可以访问该上下文的变量和函数。

例子：揭开执行上下文的幕后故事

function outer() {
  const outerVar = 10;
  function inner() {
    const innerVar = 20;
    console.log(outerVar); // 访问 outer() 的词法环境
    console.log(innerVar); // 访问 inner() 的词法环境
  }
  inner();
}

outer();

在这个例子中：

outer() 函数的执行上下文包含一个词法环境，其中声明了 outerVar，并指向全局执行上下文。
当 inner() 函数被调用时，它创建了一个新的执行上下文，其中包含一个词法环境，该环境继承了 outer() 函数的词法环境并声明了 innerVar。
当 inner() 函数执行时，它访问 outerVar，该变量在它的词法环境中可见。它还访问 innerVar，该变量在它自己的词法环境中声明。