深入探究 JavaScript 执行上下文和作用域链，掌握高级编程技巧

2023-07-10 05:56:14

揭开 JavaScript 中执行上下文和作用域链的神秘面纱

作为一名 JavaScript 开发者，你一定经常会遇到“执行上下文”和“作用域链”这两个概念。它们是 JavaScript 中至关重要的基础知识，对于提升你的代码的可读性、可维护性和可扩展性有着举足轻重的作用。在这篇文章中，我们将深入探讨 JavaScript 中的执行上下文和作用域链，并通过生动的示例帮助你理解它们的工作原理和应用场景。

什么是执行上下文？

想象一下 JavaScript 代码正在运行，此时代码所处的环境就是一个执行上下文。这个环境包含了代码正在执行的函数、变量和对象。在 JavaScript 中，执行上下文可以分为两种类型：全局执行上下文和函数执行上下文。

全局执行上下文： 当你的脚本或模块加载时，全局执行上下文就会创建。它包含了脚本或模块中定义的全局变量和函数。在浏览器环境中，全局执行上下文与 window 对象相关联。而在 Node.js 环境中，它与 global 对象相关联。
函数执行上下文： 当一个函数被调用时，一个新的函数执行上下文就会被创建。该函数执行上下文包含了函数的参数、局部变量和函数声明。函数执行上下文与函数本身紧密相关，一旦函数执行完毕，它的执行上下文也会被销毁。

作用域链揭秘

作用域链是一个从当前执行上下文一直延伸到全局执行上下文的链条。它决定了当前执行上下文可以访问哪些变量和函数。作用域链的搜索规则很简单：

在当前执行上下文中搜索变量或函数。
如果在当前执行上下文中找不到，则在父执行上下文中搜索。
依次向上搜索，直到找到变量或函数，或者到达全局执行上下文。

作用域链示例

为了更好地理解作用域链是如何工作的，我们来看一个简单的例子：

function outer() {
  let outerVariable = 'outer';

  function inner() {
    let innerVariable = 'inner';
    console.log(outerVariable, innerVariable);
  }

  inner();
}

outer();

在这个示例中，outer() 函数创建了一个名为 outerVariable 的局部变量，inner() 函数创建了一个名为 innerVariable 的局部变量。当 inner() 函数被调用时，它首先在自己的执行上下文中搜索 innerVariable 变量，找到后将其输出到控制台。然后，它会在作用域链中向上搜索 outerVariable 变量，找到后将其输出到控制台。

输出结果为：