【前端】JavaScript作用域链机制详解

💯前言

• 在 JavaScript 编程的领域中，作用域链是一个核心的理论概念，尤其是在处理嵌套函数及复杂的变量查找时，作用域链的运行机制对于开发者理解变量解析的方式至关重要。作用域链决定了一个函数在特定的上下文中如何找到所需的变量以及它们的访问权限。本文将结合一些经典的代码示例，全面深入地剖析 JavaScript 中的作用域链，以期为你构建对该概念的系统性理解。
  JavaScript

💯什么是作用域链？

作用域链（Scope Chain）是 JavaScript 中用于解决变量查找问题的机制。当 JavaScript 引擎在执行代码时，首先会从当前作用域开始逐级向上查找变量，直到找到目标变量或者到达全局作用域。如果在作用域链中找不到目标变量，就会抛出 ReferenceError 错误。

作用域链的一个核心特征是它的静态性，即作用域链是在代码定义时就已经确定的，而不是在代码运行时动态生成的。这意味着一个函数的作用域链在函数被定义时即固定下来，并且不会因函数的调用位置而改变。

通过作用域链，JavaScript 能够逐级查找变量，从而确保在合适的作用域中找到需要的变量，这为变量的解析提供了有效的方式。

💯作用域链的种类与形成机制

在 JavaScript 中，主要有三种类型的作用域：全局作用域、函数作用域和块级作用域。深入理解这三种作用域对于掌握作用域链的形成机制和运行原理至关重要。

1. 全局作用域

全局作用域是代码最外层的作用域，所有在全局范围内声明的变量和函数都属于全局作用域。这些全局变量在程序的任何地方都可以访问，无论是在函数内部还是外部，具有全局可见性。

var x = 30;

在上面的代码中，变量 x 是一个全局变量，可以在程序的任何地方被访问和使用。

2. 函数作用域

函数作用域是由函数创建的独立作用域，函数内部定义的变量只在函数内部可见，而不能在函数外部被访问。函数作用域允许在函数内对变量进行封装，这使得函数内部的变量不会污染全局环境，从而提高代码的安全性和模块化程度。

function fn() {
    var x = 10;
    console.log(x); // 输出 10
}
console.log(x); // 报错：x 未定义

在这里，变量 x 只存在于函数 fn 的作用域内，因此在函数外部访问 x 时会抛出错误。

3. 块级作用域

ES6 引入了块级作用域，由 let 和 const 关键字声明的变量只在块级作用域内有效。这意味着这些变量只能在代码块内部访问，无法在块外部访问。块级作用域的引入减少了因变量提升而可能引发的潜在问题。

if (true) {
    let y = 20;
    console.log(y); // 输出 20
}
console.log(y); // 报错：y 未定义

在这段代码中，变量 y 只在 if 代码块内部有效，离开了代码块之后，变量 y 就无法被访问。

💯作用域链的形成与查找过程

作用域链的形成源于函数的嵌套结构。当函数被定义时，JavaScript 会为这个函数创建一个内部属性 [[Scope]]，用于记录函数的作用域链。每个函数的作用域链包含了其定义时的作用域以及父级作用域的引用。通过作用域链的结构和形成机制，JavaScript 能够正确地查找变量，保证程序执行的正确性。

代码示例解析

让我们来看一个嵌套函数代码示例，以深入理解作用域链的形成和查找过程：

var x = 30;
function fn() { // 函数 fn 的作用域
    var x; // 在 fn 作用域中重新声明了一个局部变量 x，覆盖了全局变量 x
    x = 10; // 给局部变量 x 赋值为 10

    function fn1() { // 嵌套函数 fn1 的作用域
        x = 20; // 修改 fn 作用域中的局部变量 x 的值为 20
    }

    console.log(x); // 输出 10
    fn1(); // 调用 fn1，修改局部变量 x 的值为 20
    console.log(x); // 输出 20
}
fn();
console.log(x); // 输出 30

解析与作用域链查找过程

1. 全局作用域：

   • 变量 x 在全局作用域中被声明，初始值为 30。
   • 当调用 fn() 时，JavaScript 创建了 fn 函数的执行上下文，fn 的作用域链包含了全局作用域。

2. fn 函数作用域：

   • 在 fn 内部，声明了局部变量 x，并赋值为 10，此时 fn 的局部变量 x 遮蔽了全局变量 x。
   • 定义了嵌套函数 fn1，其作用域链包含了 fn 的作用域和全局作用域。

3. 调用 fn1 函数：

   • 当调用 fn1() 时，fn1 会查找变量 x，首先在自身的作用域中查找，找不到则向外层的 fn 查找。在 fn 作用域中找到了局部变量 x，并将其值修改为 20。

4. 输出结果：

   • 在 fn 内部第一次调用 console.log(x) 时，输出 10，因为此时 x 尚未被 fn1 修改。
   • 调用 fn1 后，x 被修改为 20，因此第二次调用 console.log(x) 时输出 20。
   • 最后，在全局作用域中调用 console.log(x)，输出 30，因为 fn 中的局部变量并不会影响全局变量 x。
     

💯嵌套函数与作用域链的应用

在 JavaScript 中，嵌套函数是形成作用域链的主要方式。通过嵌套函数，内层函数可以访问外层函数的变量，而这种变量的查找关系正是通过作用域链来实现的。嵌套函数的使用不仅可以使代码更加模块化和结构化，同时也提高了变量的封装性，从而使代码更加健壮和安全。

1. 嵌套函数访问外层变量

以下中的代码示例很好地展示了嵌套函数如何通过作用域链访问外层函数的变量。

function outer() {
    var outerVar = 'I am from outer';
    function inner() {
        console.log(outerVar); // 可以访问到 outer 的变量
    }
    inner();
}
outer(); // 输出：I am from outer

在上面的代码中，inner 函数可以访问 outer 函数中的变量 outerVar，这是因为 inner 的作用域链中包含了 outer 的作用域。这使得 outerVar 可以被 inner 使用，确保了内外层函数之间的变量共享。

2. 作用域链与变量遮蔽

在嵌套函数中，当内层函数的变量与外层函数的变量同名时，内层变量会**遮蔽（Shadow）**外层变量。变量遮蔽意味着在作用域链中内层变量优先级更高，从而覆盖掉外层的同名变量。

function shadowExample() {
    var x = 'outer';
    function inner() {
        var x = 'inner';
        console.log(x); // 输出 'inner'
    }
    inner();
    console.log(x); // 输出 'outer'
}
shadowExample();

在上面的代码中，inner 函数中声明了一个与外层函数同名的变量 x，因此它会遮蔽外层作用域中的 x，在 inner 中输出的值为 'inner'，而在 shadowExample 中输出的值为 'outer'。变量遮蔽对于确保内层作用域变量不受外部干扰非常重要，同时也需要注意避免因变量重名而引发的错误。

💯作用域链在闭包中的应用

闭包 是 JavaScript 中的重要概念，理解闭包的关键在于理解它与作用域链之间的关系。闭包使得函数能够记住其定义时的作用域链，即使在该作用域链之外调用该函数，它仍然能够访问其定义时的变量。闭包常用于实现私有变量和函数工厂，使得代码更具重用性和安全性。

来看一个的闭包示例：

function createCounter() {
    let count = 0;
    return function () {
        count++;
        console.log(count);
    };
}
const counter = createCounter();
counter(); // 输出 1
counter(); // 输出 2

在上面的代码中，createCounter 返回了一个匿名函数，这个匿名函数是一个闭包，其作用域链中包含了 createCounter 的作用域。因此，即使 createCounter 已经执行完毕，返回的闭包函数仍然能够访问到 count 变量，并保持其状态。每次调用 counter 时，count 都会递增，因为闭包使得 count 变量的状态能够在多次调用之间保持。

闭包的应用非常广泛，例如防抖动函数、节流函数、模块模式等，通过闭包可以实现变量的私有化，避免全局命名空间的污染。

💯作用域链与代码执行上下文

每当 JavaScript 函数被调用时，都会创建一个新的执行上下文。执行上下文包含了函数的执行环境、作用域链和其他相关信息。当函数被调用时，作用域链会被拷贝到执行上下文中，并用于变量查找。执行上下文的创建过程包括变量对象的创建、作用域链的建立以及 this 的绑定。

示例代码中的执行上下文与作用域链

var x = 30;
function fn() {
    var x = 10;
    function fn1() {
        console.log(x); // 输出 10
        x = 20;
    }
    fn1();
    console.log(x); // 输出 20
}
fn();
console.log(x); // 输出 30

• 执行 fn 时：
  • fn 的执行上下文被创建，作用域链包含了 fn 的作用域和全局作用域。
  • 在 fn 内部，局部变量 x 被声明并赋值为 10，遮蔽了全局变量 x。
• 执行 fn1 时：
  • fn1 的执行上下文被创建，作用域链包含了 fn1 的作用域、fn 的作用域以及全局作用域。
  • 当 console.log(x) 被调用时，fn1 首先在其自身作用域查找变量 x，找不到就向 fn 的作用域查找，找到局部变量 x，输出 10。
  • 执行 x = 20 后，fn 作用域中的 x 值被修改。
    

💯小结

• 
  通过本文对 JavaScript 中作用域链的深入探讨，我们了解了作用域链的形成机制、变量查找顺序以及嵌套函数中的作用域链表现。代码示例展示了如何通过作用域链实现变量的访问，以及如何处理嵌套函数中的变量遮蔽问题。

• 作用域链是 JavaScript 语言的核心特性之一，它直接影响了变量的可访问性和函数的执行行为。

• 掌握作用域链能够帮助开发者更好地理解 JavaScript 的变量查找机制、闭包以及函数嵌套的行为逻辑。深入了解作用域链的工作原理不仅有助于编写更清晰、可维护的代码，还能够有效避免变量名冲突和不必要的错误。