在JS执行上下文中漫游：以环境为锚点解读作用域关联

前端

2023-12-21 10:48:02

漫步执行上下文的舞台：理解作用域之所在

在JS中，执行上下文可以看作是一个临时创建的执行环境，它负责解析和执行其中的代码，并保存运行过程中所必需的数据，例如变量和函数。根据代码的运行位置，JS有两种主要的执行上下文：

1. 全局执行上下文：

它是默认的、也是最基本的一个执行上下文。
当浏览器开始执行一个JS脚本时，首先会建立一个全局执行上下文。
全局执行上下文中的代码是直接在全局作用域中运行的，没有外层作用域可以引用。

2. 局部执行上下文：

当JS代码中存在函数或块级作用域（如if、for循环、函数内部等）时，就会创建一个局部执行上下文。
局部执行上下文承袭自它所包含的父执行上下文，可以访问其父执行上下文中的变量和函数。
局部执行上下文只存在于该函数或块级作用域被执行期间，一旦执行完毕即销毁。

探寻作用域的关联：变量寻址之旅

在JS中，变量的作用域是按照其声明的位置决定的。变量可以在全局执行上下文中声明，也可以在局部执行上下文中声明。对于局部执行上下文中的变量，其作用域只局限于该局部执行上下文内部，不可被外部执行上下文直接访问。

当在局部执行上下文中使用一个变量时，JS会先在局部执行上下文中寻找该变量。如果没有找到，JS会沿作用域链向上查找，直到找到该变量或到达全局执行上下文。

作用域链：变量寻址的路径

作用域链是指变量在执行上下文中搜索过程所经历的路径。它由当前执行上下文和所有包含它的父执行上下文组成。作用域链的存在确保了局部执行上下文中的代码可以访问其父执行上下文中的变量和函数。

应用示例：执行上下文与作用域的协作

现在让我们以一个实际示例来展示执行上下文和作用域是如何在JS中协同工作的：

// 全局执行上下文
var globalVar = 10;

function outerFunction() {
  // 局部执行上下文
  var outerVar = 20;

  function innerFunction() {
    // 局部执行上下文
    var innerVar = 30;

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

  innerFunction();
}

outerFunction();