深入剖析 JS 作用域链：让你轻松掌握 JavaScript 变量的作用范围！

2023-11-14 12:31:27

JavaScript 中的作用域链

作用域链简介

JavaScript 中的作用域链是指所有作用域的集合，从变量定义的位置开始，直到其生命周期结束。当 JavaScript 解释器执行代码时，它会创建一个作用域链，其中包含当前执行上下文中定义的所有变量。如果某个变量在当前作用域中未定义，解释器会沿着作用域链向上查找，直到找到该变量定义的位置。

作用域链的工作原理

在 JavaScript 中，作用域链基于词法作用域的概念，即变量的作用范围由其定义的位置决定。当 JavaScript 解释器解析代码时，它会将每个变量及其作用域信息存储在称为词法环境的数据结构中。词法环境是作用域链的一部分，包含了在该作用域中定义的所有变量。

JavaScript 解释器执行代码时，它会从当前执行上下文开始沿着作用域链向上查找变量。如果在当前执行上下文中找不到该变量，解释器会继续沿着作用域链向上查找，直到找到该变量被定义的位置。

代码示例：

// 全局作用域
const globalVariable = 10;

// 函数作用域
function testScope() {
  const functionVariable = 20;

  // 块级作用域
  {
    const blockVariable = 30;

    // 在块级作用域中访问函数作用域变量
    console.log(functionVariable); // 输出：20

    // 在块级作用域中访问全局作用域变量
    console.log(globalVariable); // 输出：10
  }

  // 在函数作用域中访问块级作用域变量
  //console.log(blockVariable); // 报错：blockVariable is not defined

  // 在函数作用域中访问全局作用域变量
  console.log(globalVariable); // 输出：10
}

// 全局作用域中访问函数作用域变量
//console.log(functionVariable); // 报错：functionVariable is not defined

// 全局作用域中访问块级作用域变量
//console.log(blockVariable); // 报错：blockVariable is not defined

testScope();