javascript中的作用域链

news2024/9/22 7:03:31

在 JavaScript 中，作用域链 是一种用于解析变量的机制，它决定了在不同的上下文（或作用域）中如何查找和访问变量。作用域链与 JavaScript 的函数作用域、块级作用域紧密相关，是理解变量可见性和访问权限的关键。

1. 作用域链的基本概念

作用域

作用域（Scope） 指的是代码中变量、函数和对象的可访问范围。
JavaScript 主要有三种作用域：
- 全局作用域：在全局上下文中声明的变量或函数，可以在任何地方访问。
- 函数作用域：在函数内声明的变量和函数，只能在该函数内访问。
- 块级作用域：用 let 和 const 声明的变量具有块级作用域，只在 {} 代码块内有效。

作用域链的定义

作用域链（Scope Chain） 是指当 JavaScript 引擎在函数中查找变量时，如果在当前作用域找不到，它会沿着作用域链向上一级作用域查找，直到找到这个变量或者到达全局作用域为止。
作用域链的查找顺序是从内到外的，即由当前作用域逐层向上查找，直到全局作用域。如果在作用域链中找不到对应的变量，最终会返回 undefined 或抛出错误（如果是严格模式）。

2. 作用域链的形成

当函数被创建时，其作用域链就会确定。作用域链的形成是因为函数在定义时记录了所在上下文的作用域。
每个函数都会有自己的作用域，但函数可以访问父级作用域中的变量，这就是作用域链的关键。

3. 作用域链的查找机制

当 JavaScript 引擎需要查找一个变量时，它会遵循以下步骤：

当前作用域：首先，JavaScript 会从当前作用域查找变量。
父级作用域：如果当前作用域没有找到变量，它会沿着作用域链向父级作用域查找。
全局作用域：如果在所有父级作用域中都找不到变量，它会最终在全局作用域中查找。
未找到：如果在作用域链中都未找到该变量，则根据是否启用严格模式，返回 undefined 或抛出 ReferenceError。

4. 作用域链的案例

4.1 简单函数作用域链

let globalVar = 'I am global';

function outerFunction() {
  let outerVar = 'I am in outerFunction';
  
  function innerFunction() {
    let innerVar = 'I am in innerFunction';
    
    // 依次查找变量，作用域链的顺序是：innerFunction -> outerFunction -> global scope
    console.log(innerVar);  // I am in innerFunction
    console.log(outerVar);  // I am in outerFunction
    console.log(globalVar); // I am global
  }
  
  innerFunction();
}

outerFunction();

解释：

当 innerFunction 执行时，它的作用域链是从 innerFunction 本身开始的。
如果 innerVar 在 innerFunction 内找到，则使用该变量。
如果 outerVar 不在 innerFunction 内定义，JavaScript 会向上查找 outerFunction 的作用域，直到找到。
如果没有找到 outerVar，再继续查找全局作用域中的变量 globalVar。

4.2 函数嵌套与作用域链

let a = 10;

function first() {
  let b = 20;
  
  function second() {
    let c = 30;
    
    console.log(a); // 查找顺序：second -> first -> global，输出 10
    console.log(b); // 查找顺序：second -> first，输出 20
    console.log(c); // 查找顺序：second，输出 30
  }
  
  second();
}

first();

解释：

second 函数内部定义了变量 c，但当它访问 a 和 b 时，需要沿着作用域链向上查找。
second 函数的作用域链包含了它自己的作用域和 first 函数的作用域，以及全局作用域。

4.3 块级作用域与作用域链

let globalVar = 'global';

function checkScope() {
  let functionScopeVar = 'function scope';
  
  if (true) {
    let blockScopeVar = 'block scope';
    console.log(blockScopeVar); // block scope
    console.log(functionScopeVar); // function scope
    console.log(globalVar); // global
  }

  // 块级作用域外访问 blockScopeVar 会报错
  // console.log(blockScopeVar); // ReferenceError: blockScopeVar is not defined
}

checkScope();

解释：

blockScopeVar 是通过 let 定义的块级作用域变量，因此只能在 if 块内访问。
当 blockScopeVar 被查找时，它首先会在块内找到。
functionScopeVar 在整个 checkScope 函数内都是可访问的，因为它是在函数作用域中定义的。
globalVar 是全局变量，因此可以在任何地方访问。

5. 作用域链的特点

词法作用域（静态作用域）：
- JavaScript 使用词法作用域，即函数的作用域在函数定义时就已经决定，而不是在函数调用时。
- 因此，作用域链是基于函数的定义位置，而不是调用位置。
作用域链的层次结构：
- 每个函数调用时，都会有一个自己的作用域。
- 如果作用域中没有找到某个变量，就会通过作用域链逐级向上查找，直到找到变量或到达全局作用域。
嵌套作用域：
- 函数可以在其内部定义其他函数，形成嵌套作用域。内层函数可以访问外层函数的变量，但外层函数不能访问内层函数的变量。
闭包与作用域链：
- 闭包是依赖于作用域链的。闭包是指一个函数能够记住并访问它的词法作用域，即使这个函数在词法作用域之外被调用。
闭包案例：
```
function outer() {
  let outerVar = 'I am outer';
  return function inner() {
    console.log(outerVar); // 闭包机制：inner 函数访问 outer 的变量
  };
}

const innerFunc = outer();
innerFunc(); // 输出: I am outer
```
解释：inner 函数可以记住并访问 outer 函数的 outerVar，即使 outer 函数已经执行结束。这是因为 inner 函数在定义时创建了一个闭包，保留了对其词法作用域的引用。