揭秘JS执行环境和作用域的迷雾

前端

2023-09-07 17:43:50

在JavaScript的神奇世界中，执行环境和作用域是理解代码行为的关键。它们就像舞台上错综复杂的幕布，控制着变量和函数的可用性，影响着代码的运行方式。

执行环境：代码的舞台

执行环境定义了代码可以访问的数据。每个代码块都有它自己的执行环境，其中包含一个称为变量对象的特殊对象。它存储着该执行环境中声明的变量。我们通常无法直接访问变量对象，解析器会在我们访问变量或函数时在后台使用它。

当代码执行完毕，执行环境就会销毁，里面的变量和函数定义也会烟消云散。因此，不同执行环境中声明的变量是相互独立的。

作用域：变量的可视范围

作用域决定了代码中哪些变量和函数可以被访问。每个执行环境都有一个与其关联的作用域。作用域的范围取决于代码的类型和它在程序中的位置。

全局作用域： 在代码的最外层声明的变量和函数具有全局作用域。它们可以在程序中的任何地方访问。
局部作用域： 在函数内部声明的变量和函数具有局部作用域。它们只在该函数及其子函数中可见。

作用域的嵌套特性使得程序可以创建局部变量，而不影响同名全局变量。这有助于防止变量命名冲突和代码混乱。

打破边界：作用域链

当代码需要访问超出其立即作用域的变量时，它会沿着作用域链向上查找。作用域链是一个执行环境的层次结构，每个执行环境都包含对父执行环境的引用。

如果一个变量在当前执行环境中找不到，解释器就会沿着作用域链查找，直到找到该变量或者到达全局作用域。这种机制允许代码访问在不同作用域中声明的变量。

例子：剖析作用域链

以下代码演示了作用域链的实际应用：

// 全局变量
let globalVar = 10;

function outer() {
  // 局部变量
  let outerVar = 20;

  function inner() {
    // 局部变量
    let innerVar = 30;

    console.log(globalVar); // 10
    console.log(outerVar); // 20
    console.log(innerVar); // 30
  }

  inner();
}

outer();