2.2 块级作用域与 TDZ

2.2 块级作用域与 TDZ

ES6 引入了 let 和 const，它们不仅解决了 var 的作用域问题，还引入了 块级作用域 和 暂时性死区（Temporal Dead Zone, TDZ） 的概念。本节将详细讲解这些特性及其对代码行为的影响。

2.2.1 块级作用域

在 ES5 中，JavaScript 只有 全局作用域 和 函数作用域。ES6 引入了 块级作用域，即由 {} 包裹的代码块（如 if、for、while 等）形成的作用域。

1. let 和 const 的块级作用域
let 和 const 声明的变量只在当前块内有效，外部无法访问：

if (true) {
  let x = 10;
  const y = 20;
  console.log(x); // 输出 10
  console.log(y); // 输出 20
}
console.log(x); // 报错：ReferenceError
console.log(y); // 报错：ReferenceError

2. 块级作用域的优势

• 避免变量污染：块级作用域可以限制变量的生命周期，避免变量泄露到外部。
• 更清晰的代码结构：变量只在需要的块内有效，减少命名冲突。

2.2.2 暂时性死区（TDZ）

暂时性死区（Temporal Dead Zone, TDZ）是指从块级作用域开始到变量声明之间的区域，在这段时间内访问变量会报错。

1. TDZ 的表现

console.log(x); // 报错：ReferenceError
let x = 10;

在 let x = 10; 之前访问 x，会抛出 ReferenceError，因为此时 x 处于 TDZ。

2. TDZ 的作用

• 防止变量提升导致的意外行为。
• 强制开发者先声明后使用，提高代码可读性和可维护性。

3. TDZ 的触发条件

• 使用 let 或 const 声明的变量。
• 在变量声明之前访问该变量。

2.2.3 块级作用域与 TDZ 的示例

示例 1：块级作用域

function blockScopeExample() {
  if (true) {
    let a = 1;
    const b = 2;
    console.log(a); // 输出 1
    console.log(b); // 输出 2
  }
  console.log(a); // 报错：ReferenceError
  console.log(b); // 报错：ReferenceError
}
blockScopeExample();

示例 2：暂时性死区

function tdzExample() {
  console.log(x); // 报错：ReferenceError
  let x = 10;
}
tdzExample();

示例 3：TDZ 与循环

for (let i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i); // 输出 0, 1, 2
  }, 100);
}

每次循环都会创建一个新的块级作用域，i 的值会被保留，因此 setTimeout 可以正确输出。

2.2.4 块级作用域与 var 的对比

1. var 的作用域
var 只有函数作用域，没有块级作用域：

function varScopeExample() {
  if (true) {
    var x = 10;
  }
  console.log(x); // 输出 10
}
varScopeExample();

2. let 和 const 的作用域
let 和 const 具有块级作用域：

function letScopeExample() {
  if (true) {
    let x = 10;
  }
  console.log(x); // 报错：ReferenceError
}
letScopeExample();

2.2.5 总结

• 块级作用域：let 和 const 声明的变量只在当前块内有效，避免了变量泄露和命名冲突。
• 暂时性死区（TDZ）：在变量声明之前访问会报错，强制开发者先声明后使用。
• 优势：块级作用域和 TDZ 使代码更安全、更易维护，是现代 JavaScript 开发的重要特性。

通过理解块级作用域和 TDZ，你可以更好地掌握 let 和 const 的使用场景，编写出更健壮的代码。

思考题：

1. 块级作用域与函数作用域的区别是什么？
2. 为什么 TDZ 会提高代码的可读性和可维护性？
3. 在循环中使用 let 和 var 有什么区别？