🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

一、作用域的核心概念：变量的「可见范围」

在 JavaScript 中，作用域（Scope）是变量、函数与对象的可访问范围，它决定了代码块或函数中标识符的可见性和生命周期。简单来说，作用域就像一个“围栏”，规定了变量能在哪里被访问，哪里不能被访问。

1.1 作用域的分类

JavaScript 中有三种常见的作用域类型：

• 全局作用域（Global Scope）

  • 最外层的作用域，在浏览器环境中对应 window 对象，在 Node.js 中对应 global 对象。
  • 全局作用域中的变量可以在代码的任何位置被访问。
  • 示例：

    const globalVar = '我是全局变量'; // 声明在全局作用域
    function globalFunc() {
      console.log(globalVar); // 可以访问全局变量
    }
    

• 函数作用域（Function Scope）

  • 由函数声明形成的作用域，函数内部的变量只能在函数内部访问，函数外部无法直接访问。
  • 示例：

    function funcScope() {
      let localVar = '我是函数作用域变量'; // 仅在 funcScope 内部可见
    }
    console.log(localVar); // 报错：localVar 未定义
    

• 块级作用域（Block Scope）

  • ES6 引入 let 和 const 后新增的作用域，由 { } 代码块（如 if、for 语句）形成。
  • 示例：

    if (true) {
      let blockVar = '我是块级作用域变量'; // 仅在当前代码块内可见
    }
    console.log(blockVar); // 报错：blockVar 未定义
    

二、作用域链：变量查找的「路径地图」

当访问一个变量时，JavaScript 引擎会按照特定的顺序逐层查找，这个查找路径形成的链条称为作用域链（Scope Chain）。作用域链的结构决定了变量的访问规则。

2.1 作用域链的形成机制

1. 函数创建时的预解析

   • 函数在定义时（而非调用时），会创建一个作用域链，包含自身作用域和外层作用域的引用。
   • 例如，嵌套函数的作用域链会包含：当前函数作用域 → 外层函数作用域 → … → 全局作用域。

2. 变量查找的「就近原则」

   • 当在函数中访问变量时，引擎先在当前作用域查找；若未找到，则沿着作用域链向上一层查找，直到全局作用域。若仍未找到，则抛出 ReferenceError 错误。
   • 示例：

     let outerVar = '外层变量';
     function outerFunc() {
       let middleVar = '中层变量';
       function innerFunc() {
         let innerVar = '内层变量';
         console.log(outerVar); // 访问全局作用域的 outerVar（输出：外层变量）
         console.log(middleVar); // 访问外层函数的 middleVar（输出：中层变量）
         console.log(innerVar); // 访问当前作用域的 innerVar（输出：内层变量）
       }
       innerFunc();
     }
     outerFunc();
     

三、变量提升：作用域的「隐形规则」

在 JavaScript 中，变量和函数的声明会被提升到作用域的顶部，但赋值不会被提升。这一机制可能导致“先使用后声明”的现象，但本质是作用域预解析的结果。

3.1 变量提升的分类

• 函数声明提升

  • 函数声明会被整体提升到作用域顶部，因此可以在声明前调用函数。

  func(); // 正常执行，输出：函数被调用
  function func() { console.log('函数被调用'); }
  

• 变量声明提升（var）

  • 使用 var 声明的变量会被提升，但赋值留在原地（即“先声明 undefined，后赋值”）。

  console.log(foo); // 输出：undefined（变量已提升但未赋值）
  var foo = 'bar';
  

• let 和 const 不提升？

  • 实际上，let 和 const 声明的变量也会提升，但会被「暂时性死区（Temporal Dead Zone, TDZ）」限制：在声明前访问会报错。

  console.log(bar); // 报错：bar is not defined（处于暂时性死区）
  let bar = 'baz';
  

四、作用域与执行上下文：底层视角的关联

4.1 执行上下文（Execution Context）

执行上下文是 JavaScript 执行代码时的运行环境，包含三个阶段：

1. 创建阶段：确定作用域链，初始化变量（var 初始化为 undefined，函数声明初始化函数体）。
2. 执行阶段：逐行执行代码，赋值变量，调用函数。
3. 销毁阶段：执行上下文从执行栈中弹出，变量被垃圾回收。

4.2 作用域链与执行上下文的关系

• 每个执行上下文都有一个 [[Scope]] 属性（也称为「词法环境」），指向包含父级作用域的引用，形成作用域链。
• 函数的执行上下文在创建时，会将自身的局部作用域与外层作用域的 [[Scope]] 合并，构成完整的作用域链。

五、常见问题与最佳实践

5.1 闭包：作用域链的「保鲜剂」

闭包是函数内部引用外部作用域变量的现象，由于作用域链的存在，即使外层函数执行完毕，内部函数仍可访问外层变量。
示例：计数器闭包

function createCounter() {
  let count = 0;
  return function() {
    count++; // 访问外层函数的 count 变量
    console.log(count);
  };
}
const counter = createCounter();
counter(); // 输出：1
counter(); // 输出：2（闭包保持了 count 的状态）

5.2 避免作用域污染

• 全局变量风险：全局作用域变量容易被意外修改，建议用 const 声明全局常量，避免滥用 var。
• 块级作用域替代函数作用域：优先使用 let/const 在块级作用域中声明变量，减少不必要的作用域嵌套。

六、总结：作用域的核心价值

作用域是 JavaScript 的基础机制，它通过隔离变量、控制访问范围、管理内存生命周期，确保代码的健壮性和可维护性。理解作用域链、变量提升和执行上下文的底层逻辑，能帮助开发者避免变量冲突、闭包内存泄漏等问题，写出更高效、安全的代码。

延伸思考：

• 为什么 let/const 存在暂时性死区？
• 箭头函数的作用域链有何特殊之处？
• 浏览器和 Node.js 环境下的全局作用域有何区别？

通过深入理解作用域的原理，我们能更清晰地把握 JavaScript 的运行机制，这也是进阶高级前端工程师的必经之路。