前端技术 | 纵览 JavaScript 执行上下文的深层机制

2023-10-11 05:59:14

JavaScript 执行上下文的深入之旅：掌握代码执行的基石

JavaScript 执行上下文是理解 JavaScript 代码如何运行的关键概念。它定义了变量、函数和语句的作用域，从而影响代码的行为。在本指南中，我们将深入探索执行上下文的机制，并了解它在 JavaScript 应用程序中扮演的重要角色。

执行上下文与执行栈

JavaScript 在执行代码时创建执行上下文。每个上下文包含特定代码块中的变量、函数和作用域信息。执行上下文遵循后进先出 (LIFO) 原理的栈结构。当一个函数被调用时，一个新的执行上下文被压入栈中，而当函数返回时，它被弹出。

作用域链

作用域链决定了变量和函数的作用域。它由当前执行上下文及其父上下文的集合组成。当前上下文的作用域包含它自己和父级上下文的变量和函数。词法作用域是指变量和函数的作用域由它们在代码中的位置决定，而不是由执行上下文决定。

变量提升

变量提升是一种 JavaScript 特性，它将变量和函数声明提升到其所在作用域的顶部。这意味着它们可以在声明之前被使用。虽然变量提升可以方便，但它可能会导致错误和未定义的变量，因此了解这一点很重要。

函数执行上下文

函数执行上下文在函数被调用时创建。它包含函数的参数、函数体中的变量和函数，以及函数执行的作用域。函数执行上下文与全局上下文不同，后者包含全局变量和函数。

this

this 指向当前执行上下文。它的值由当前上下文确定。在全局上下文中，this 指向 window 对象，但在函数执行上下文中，它指向调用函数的对象。

闭包

闭包是一种 JavaScript 函数，它包含函数及其执行上下文。闭包可以在其执行上下文之外被调用，这意味着它们可以访问父上下文的变量和函数，即使父上下文已经执行完毕。闭包可以用于创建私有变量、事件处理程序和其他有用的特性。

深入理解执行上下文：代码示例

为了更好地理解执行上下文，让我们考虑以下代码示例：

// 全局执行上下文
console.log(globalVar); // undefined
let globalVar = 10;
console.log(globalVar); // 10

// 函数执行上下文
function myFunction() {
  console.log(localVar); // undefined
  let localVar = 20;
  console.log(localVar); // 20
}

myFunction();

在此示例中，全局变量 globalVar 在声明之前被使用，这会输出 undefined。函数 myFunction 的执行上下文包含函数变量 localVar。在调用 myFunction 时，变量提升会将 localVar 提升到函数顶部，但它仍然是未定义的。当函数执行时，localVar 被分配为 20。