【JavaScript-Day 19】深入理解 JavaScript 作用域：块级、词法及 Hoisting 机制-CSDN博客

本文链接：https://blog.csdn.net/Kiradzy/article/details/148124451

Langchain系列文章目录

01-玩转LangChain：从模型调用到Prompt模板与输出解析的完整指南
 02-玩转 LangChain Memory 模块：四种记忆类型详解及应用场景全覆盖
 03-全面掌握 LangChain：从核心链条构建到动态任务分配的实战指南
 04-玩转 LangChain：从文档加载到高效问答系统构建的全程实战
 05-玩转 LangChain：深度评估问答系统的三种高效方法（示例生成、手动评估与LLM辅助评估）
06-从 0 到 1 掌握 LangChain Agents：自定义工具 + LLM 打造智能工作流！
07-【深度解析】从GPT-1到GPT-4：ChatGPT背后的核心原理全揭秘
 08-【万字长文】MCP深度解析：打通AI与世界的“USB-C”，模型上下文协议原理、实践与未来

JavaScript系列文章目录

文章目录

Langchain系列文章目录
Python系列文章目录
PyTorch系列文章目录
机器学习系列文章目录
深度学习系列文章目录
Java系列文章目录
JavaScript系列文章目录
前言
一、块级作用域 (Block Scope) - `let` 与 `const` 的专属舞台
二、词法作用域 (Lexical Scoping) - 定义时的“血统”
三、变量提升 (Hoisting) - “声明”的提前
四、总结

前言

在上一篇文章中，我们初步探讨了 JavaScript 中的作用域概念，了解了全局作用域和函数作用域是如何管理变量和函数的“领地”的。然而，JavaScript 的作用域体系远不止于此。为了编写出更健壮、更易于维护的代码，我们还需要深入理解 ES6 引入的块级作用域、神秘的词法作用域（也称静态作用域）以及一个非常重要且时常引起困惑的特性——变量提升（Hoisting）。本篇文章将带你彻底搞懂这些概念，助你成为一名更出色的 JavaScript 开发者！

一、块级作用域 (Block Scope) - `let` 与 `const` 的专属舞台

在 ES6 之前，JavaScript 只有全局作用域和函数作用域，这在某些情况下会导致变量管理的困扰，例如循环变量泄露到外部作用域。ES6 的到来，通过 let 和 const 关键字，为我们带来了期盼已久的块级作用域。

1.1 什么是块级作用域？

1.1.1 定义与存在意义

块级作用域指的是变量的有效范围仅限于其声明所在的代码块（通常由一对花括号 {} 包裹）。这意味着在一个代码块内部用 let 或 const 声明的变量，在该代码块外部是无法访问的。

它的存在意义重大：

防止变量泄露：确保块内部的变量不会意外地污染外部作用域。
提高代码可读性和可维护性：变量的生命周期更加清晰，降低了命名冲突的风险。

graph TD
    A[外部作用域] --> B{代码块 {}};
    B -- let/const 声明 --> C[块内变量];
    A -.-> C; subgraph B
        direction LR
        C
    end
    note right of C 块内变量仅在块内可见

1.1.2 与函数作用域的对比

特性	函数作用域 (`var`)	块级作用域 (`let`, `const`)
限定范围	函数体内部	代码块 `{}` 内部
变量泄露	容易在 `for` 循环、`if` 语句中发生变量泄露	有效防止变量泄露
关键字	`var`	`let`, `const`

1.2 `let` 与块级作用域

let 命令用于声明一个块级作用域的局部变量。

1.2.1 `let` 的基本特性

块级作用域：let 声明的变量只在其所在的代码块内有效。
不存在变量提升：与 var 不同，let 声明的变量不会被提升到作用域顶部，必须先声明后使用。
暂时性死区 (TDZ)：在代码块内，使用 let 命令声明变量之前，该变量都是不可用的。这在语法上称为“暂时性死区”（Temporal Dead Zone）。
不允许重复声明：在同一作用域内，不允许重复声明同一个变量。

{
  let a = 10;
  var b = 1;
  console.log(a); // 输出: 10
}

// console.log(a); // Uncaught ReferenceError: a is not defined
console.log(b);   // 输出: 1

1.2.2 `let` 在循环中的经典应用

let 的块级作用域特性使得它在 for 循环中表现出色，完美解决了 var 声明循环变量时可能遇到的问题（例如，在循环中为多个 DOM 元素绑定事件监听，回调函数中的循环变量始终是最后一次循环的值）。

使用 var 的问题示例：

for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log('var i:', i); // 预期输出 0, 1, 2，实际三次都输出 3
  }, 100);
}
// 原因：setTimeout 中的回调函数执行时，循环早已结束，i 的值已经变成了 3。
// 所有回调函数共享同一个函数作用域内的变量 i。

使用 let 解决：

for (let i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log('let i:', i); // 输出: 0, 1, 2 (符合预期)
  }, 100);
}
// 原因：每次循环，`let` 都会创建一个新的块级作用域，并且将 i 的当前值绑定到这个作用域。
// 相当于为每个 setTimeout 的回调函数都保留了一个独立的 i。

1.2.3 块级作用域的创建场景

除了常见的 {} 代码块，以下场景也会创建块级作用域：

if 语句的 {}
for 循环的 {} (包括 for...in, for...of)
while 和 do...while 循环的 {}
switch 语句的 case 子句（如果 case 内部有 {}包裹，或者直接在 case 内使用 let）
甚至一个独立的 {} 也能构成一个块级作用域。

if (true) {
  let blockVar = "I'm in a block!";
  console.log(blockVar); // 输出: I'm in a block!
}
// console.log(blockVar); // ReferenceError

{
  let isolatedVar = "Isolated block";
  console.log(isolatedVar); // 输出: Isolated block
}
// console.log(isolatedVar); // ReferenceError

1.3 `const` 与块级作用域

const 命令也用于声明一个块级作用域的常量。一旦声明，常量的值就不能改变。

1.3.1 `const` 的基本特性

块级作用域：与 let 相同。
声明时必须初始化：const 声明的变量必须在声明的同时赋值。
值不可重新赋值：尝试修改 const 声明的常量会导致错误。
同样存在暂时性死区 (TDZ)。

const PI = 3.14159;
// PI = 3; // Uncaught TypeError: Assignment to constant variable.

// const G; // Uncaught SyntaxError: Missing initializer in const declaration

1.3.2 `const` 声明对象与数组的注意事项

对于 const 声明的对象或数组（引用类型），const 保证的是变量指向的那个内存地址不能改变，而不是该地址中的数据不能改变。这意味着对象或数组的属性或元素是可以修改的。

const person = {
  name: "Alice",
  age: 30
};

person.age = 31; // 这是允许的
console.log(person); // 输出: { name: "Alice", age: 31 }

// person = { name: "Bob" }; // Uncaught TypeError: Assignment to constant variable. (尝试将 person 指向新对象)

const colors = ["red", "green"];
colors.push("blue"); // 这是允许的
console.log(colors); // 输出: ["red", "green", "blue"]

// colors = ["yellow"]; // Uncaught TypeError: Assignment to constant variable. (尝试将 colors 指向新数组)

1.4 块级作用域的优势与实践

1.4.1 减少命名冲突

块级作用域将变量的作用范围限制得更小，从而大大减少了在复杂代码中因变量名重复而导致的意外覆盖或冲突。

1.4.2 提升代码可读性和可维护性

变量的生命周期更短，作用范围更明确，使得代码的逻辑更加清晰，更容易理解和维护。

1.4.3 暂时性死区 (Temporal Dead Zone - TDZ) 详解

暂时性死区 (TDZ) 是 let 和 const 的一个重要特性。它指的是从一个块级作用域的开始，到该块中 let 或 const 声明的变量实际被声明（初始化）之前的这个区域。

{ // 块级作用域开始
  // TDZ 开始 for 'myVar'
  // console.log(myVar); // ReferenceError: Cannot access 'myVar' before initialization

  let myVar = "Hello"; // 'myVar' 的 TDZ 在这里结束
  console.log(myVar); // 输出: Hello
}

为什么要有 TDZ？
TDZ 的设计主要是为了帮助开发者捕捉潜在的错误，避免在变量声明前就使用变量（这在 var 中是可能的，但值会是 undefined），从而写出更可靠的代码。

二、词法作用域 (Lexical Scoping) - 定义时的“血统”

词法作用域，也称为静态作用域，是 JavaScript 采用的作用域模型。理解词法作用域对于掌握闭包等高级概念至关重要。

2.1 什么是词法作用域？

2.1.1 定义与核心思想

词法作用域 (Lexical Scoping) 指的是变量的作用域是在代码编写（定义）时就确定了的，而不是在函数调用时确定的。换句话িলাম，函数的作用域链是在函数定义的时候创建的，并且固定不变。

核心思想：“词法” 这个词来源于编译过程中的“词法分析”阶段。变量的作用域取决于它在源代码中被声明的位置。

2.1.2 静态特性

词法作用域的静态特性意味着，无论函数在哪里被调用，或者如何被调用，它的词法作用域都只由函数被声明时所处的位置决定。

2.2 词法作用域的体现

2.2.1 函数嵌套与作用域链

当一个函数嵌套在另一个函数内部时，内部函数可以访问其外部函数（以及全局）的变量。这种逐级向外查找变量的机制，形成了一条作用域链 (Scope Chain)。

let globalVar = "I'm global";

function outerFunction() {
  let outerVar = "I'm outer";

  function innerFunction() {
    let innerVar = "I'm inner";
    console.log(innerVar);   // 输出: I'm inner (自身作用域)
    console.log(outerVar);   // 输出: I'm outer (来自 outerFunction 的作用域)
    console.log(globalVar);  // 输出: I'm global (来自全局作用域)
  }

  innerFunction();
}

outerFunction();

在这个例子中：

innerFunction 的作用域链：innerFunction 自身作用域 -> outerFunction 作用域 -> 全局作用域。
当 innerFunction 需要访问一个变量时，它首先在自己的作用域中查找。如果找不到，就沿着作用域链向上级作用域查找，直到找到该变量或者到达全局作用域。

2.2.2 词法作用域与闭包的关联 (初步)

词法作用域是理解闭包 (Closure) 的基石。闭包的本质就是一个函数能够“记住”并访问它在词法作用域中的变量，即使该函数在其词法作用域之外执行。我们将在后续文章中详细探讨闭包。

2.3 词法作用域的重要性

2.3.1 预测变量的可访问性

由于作用域在代码编写时就已确定，开发者可以相对容易地分析和预测代码中任何位置的变量的可访问性，这有助于减少运行时错误和提高代码的可靠性。

2.3.2 JavaScript 引擎如何查找变量

当 JavaScript 引擎遇到一个变量引用时，它会执行以下查找过程（简化版）：

当前作用域查找：首先在当前执行上下文的作用域中查找该变量。
沿作用域链向上查找：如果在当前作用域未找到，则向其外部（父级）作用域查找。
重复步骤2：继续向上查找，直到找到该变量或者到达最外层的全局作用域。
最终结果：如果在全局作用域也未找到，则抛出 ReferenceError（非严格模式下，对未声明变量赋值会隐式创建全局变量，但这是不推荐的做法）。

三、变量提升 (Hoisting) - “声明”的提前

变量提升是 JavaScript 中一个独特且容易引起混淆的机制。它描述了 JavaScript 引擎在代码执行前如何处理变量和函数声明。

3.1 什么是变量提升？

3.1.1 直观理解与误区

变量提升 (Hoisting) 是指 JavaScript 引擎在代码执行之前，会将所有用 var 声明的变量和函数声明（不包括函数表达式的赋值）“提升”到其所在作用域的顶部。

常见的误区：

不是代码的物理移动：变量提升并不是真的把代码移动到顶部，而是 JavaScript 引擎在编译阶段（代码执行前）就记录了这些声明。
只提升声明，不提升赋值：对于 var 声明的变量，只有声明本身被提升了，赋值操作仍然保留在原来的位置。

3.1.2 JavaScript 引擎的解析过程（简化版）

可以简单理解为 JavaScript 引擎在执行代码前有两个阶段：

编译阶段 (Compilation Phase)：
- 词法分析、语法分析、代码生成等。
- 在这个阶段，引擎会找出所有的声明（变量和函数），并将其记录在对应的作用域中。这就是“提升”发生的地方。
执行阶段 (Execution Phase)：
- 引擎按照代码的顺序执行，并进行赋值、函数调用等操作。

3.2 `var` 的变量提升

3.2.1 声明提升，赋值不提升

使用 var 声明变量时，变量的声明会被提升到其作用域（全局或函数）的顶部，但其赋值操作会留在原地。这意味着在声明之前访问 var 变量是合法的，但其值为 undefined。

console.log(x); // 输出: undefined (x 的声明被提升了)
var x = 5;
console.log(x); // 输出: 5 (赋值后)

function testVarHoisting() {
  console.log(y); // 输出: undefined
  var y = 10;
  console.log(y); // 输出: 10
}
testVarHoisting();

3.2.2 函数声明的提升 (整体提升)

对于函数声明 (Function Declaration)，不仅函数名被提升，函数的整个定义（函数体）也会被提升。因此，可以在函数声明之前调用该函数。

sayHello(); // 输出: "Hello, Hoisting!" (函数声明被整体提升)

function sayHello() {
  console.log("Hello, Hoisting!");
}

3.2.3 函数表达式的变量提升 (类似 `var`)

对于函数表达式 (Function Expression)，行为类似于 var 变量的提升。即只有变量名（函数名）的声明被提升，并初始化为 undefined，而函数的实际赋值（函数体）不会提升。因此，在函数表达式赋值之前调用它会导致 TypeError。

// console.log(greet);    // 输出: undefined (greet 声明被提升)
// greet();               // Uncaught TypeError: greet is not a function

var greet = function() {
  console.log("Greetings!");
};

greet(); // 输出: "Greetings!" (正常调用)

对比函数声明与函数表达式的提升：

canCallMe(); // "Function Declaration!"

// cannotCallMeExpression(); // TypeError: cannotCallMeExpression is not a function

function canCallMe() {
  console.log("Function Declaration!");
}

var cannotCallMeExpression = function() {
  console.log("Function Expression!");
};
cannotCallMeExpression(); // "Function Expression!"

3.3 `let` 和 `const` 的“伪”提升与暂时性死区 (TDZ)

let 和 const 的行为与 var 在提升方面有所不同，它们引入了“暂时性死区”的概念。

3.3.1 `let`/`const` 是否提升？

从技术上讲，let 和 const 声明的变量在某种程度上也会被“提升”。JavaScript 引擎在进入一个块级作用域时，会注意到这些声明。然而，与 var 不同的是，它们不会被初始化为 undefined。相反，它们进入了一种未初始化状态。

3.3.2 暂时性死区 (TDZ) 的再强调

在 let 或 const 声明实际执行之前（即代码中声明语句的位置之前），任何试图访问这些变量的行为都会导致 ReferenceError。这个从作用域开始到声明语句之间的区域就是该变量的暂时性死区 (TDZ)。

{
  // a 的 TDZ 开始
  // console.log(a); // ReferenceError: Cannot access 'a' before initialization
  // typeof a;       // ReferenceError

  let a = "Hello from let"; // a 的 TDZ 结束
  console.log(a); // 输出: "Hello from let"

  // b 的 TDZ 开始
  // console.log(b); // ReferenceError
  const b = "Hello from const"; // b 的 TDZ 结束
  console.log(b); // 输出: "Hello from const"
}

3.3.3 为什么 `let`/`const` 这样设计？

let 和 const 引入 TDZ 的主要目的是：

减少错误：避免了在变量声明前使用变量（其值为 undefined）这种由 var 提升带来的潜在问题。
促进更好的编码习惯：鼓励开发者在使用变量前先进行声明。
使代码更易于理解：变量的行为更加符合直觉，减少了意外。

3.4 变量提升的常见问题与最佳实践

3.4.1 如何避免由提升引发的 Bug

优先使用 let 和 const：它们具有块级作用域和 TDZ，能有效避免 var 提升带来的许多问题。
始终在作用域顶部声明变量：养成在使用变量之前先声明它们的习惯，即使是使用 var。
理解函数声明和函数表达式的区别：清楚它们的提升行为不同。

3.4.2 理解提升对代码阅读的影响

虽然现代 JavaScript 开发中 let 和 const 的使用大大减少了对 var 提升的依赖，但理解提升机制仍然很重要，特别是在阅读旧代码或理解某些 JavaScript 底层行为时。不理解提升可能会导致对代码执行顺序的误判。

四、总结

本次我们深入探讨了 JavaScript 作用域的另外几个核心方面，它们对于编写高质量代码至关重要：

块级作用域：
- 通过 let 和 const 关键字实现，将变量的生命周期限制在代码块 {} 内。
- 有效解决了 var 带来的变量泄露和命名冲突问题。
- let 和 const 声明的变量存在暂时性死区 (TDZ)，在声明前不可访问。
- const 用于声明常量，其值（对于原始类型）或引用（对于对象/数组）不可更改。
词法作用域 (静态作用域)：
- JavaScript 采用词法作用域，变量的作用域在代码编写时（定义时）就已确定，与函数调用位置无关。
- 函数嵌套会形成作用域链，内部函数可以访问外部函数的变量。
- 词法作用域是理解闭包的基础。
变量提升 (Hoisting)：
- var 声明的变量和函数声明会被提升到其作用域顶部。
- 对于 var，只提升声明，不提升赋值，提升后的变量默认为 undefined。
- 函数声明会整体提升（名称和函数体）。
- 函数表达式的提升行为类似 var 变量（只提升变量名）。
- let 和 const 虽然也会被引擎注意到，但由于 TDZ 的存在，它们在声明前访问会导致 ReferenceError，表现上更像是“不提升”或“提升但不初始化”。