脚本引擎的执行上下文与作用域详解

前端

2023-10-17 02:44:49

在 JavaScript 中，执行上下文是 JavaScript 代码执行的环境，它定义了变量、函数和对象的行为和可访问性。本文将深入探讨执行上下文，包括它的概念、创建、执行和作用域规则。

执行上下文

每个 JavaScript 代码段或脚本都有自己的执行上下文，它是一个包含变量对象、作用域链和当前执行代码的抽象概念。执行上下文充当 JavaScript 代码执行的容器，为变量的查找、函数的调用和代码的执行提供环境。

执行上下文的创建

执行上下文有两个创建阶段：

创建阶段： 在这个阶段，创建变量对象并将其初始化为 undefined。还会创建作用域链，它是一个指向父作用域的指针列表。
执行阶段： 在执行阶段，执行代码并评估变量。变量的赋值和函数的调用在这个阶段发生。

执行阶段

执行阶段是执行上下文的生命周期中代码实际执行的阶段。在这个阶段，会发生以下事件：

执行代码语句。
评估变量。
调用函数。
创建或修改对象。

作用域

作用域定义了变量和函数的可访问性。JavaScript 有两种主要作用域：

全局作用域： 在脚本的整个生命周期内都可以访问全局变量和函数。它们在执行上下文之外声明。
局部作用域： 局部变量和函数仅在函数内部可访问。它们在函数执行上下文中声明。

作用域链

作用域链是一个作用域对象的列表，从当前执行上下文开始，然后指向其父作用域，依此类推。当查找变量或函数时，JavaScript 会从当前执行上下文向作用域链中向上搜索，直到找到变量或函数为止。

实际案例

以下代码演示了执行上下文和作用域：

// 创建一个全局变量
var globalVar = "Global";

// 创建一个函数，并传入一个参数
function myFunction(param) {
  // 在局部作用域中创建局部变量
  var localVar = "Local";

  // 使用全局变量
  console.log(globalVar); // 输出："Global"

  // 使用局部变量
  console.log(localVar); // 输出："Local"

  // 尝试访问外部变量（函数作用域之外）
  //console.log(externalVar); // 错误：externalVar 未定义
}

// 调用函数
myFunction("foo");

在这个示例中：

执行上下文： 全局代码和 myFunction 函数都有自己的执行上下文。
作用域： globalVar 是全局变量，因此在全局代码和函数中都可访问。localVar 是局部变量，只能在 myFunction 函数内部访问。
作用域链： 对于 myFunction 函数，作用域链将从当前执行上下文开始，然后指向全局执行上下文。