VScode插件：前端每日一题

什么是 let 的临时性死区?

let 的临时性死区（Temporal Dead Zone, TDZ）

在 JavaScript 中，变量通过 let 或 const 声明时，会存在一个“临时性死区”，即在声明之前无法访问该变量，哪怕它已经被提升（Hoisted）到作用域的顶部。这种现象被称为“临时性死区”。

---

核心特点

1. 变量提升： 变量声明会被提升到作用域顶部，但初始化不会提升。
   这意味着在变量声明之前访问它，会导致 ReferenceError。

2. 暂时不可访问： 从作用域开始到变量实际声明的这段时间，变量处于“临时性死区”，无法访问。

3. 作用范围： 临时性死区只在当前作用域内有效。

---

代码示例

示例 1：访问未声明的变量

console.log(x); // ReferenceError: Cannot access 'x' before initialization
let x = 10;

分析：

• 变量 x 在作用域中已经被提升。
• 但在声明 let x = 10; 之前，x 处于临时性死区，因此会报错。

---

示例 2：与 var 的对比

console.log(y); // undefined (变量提升，初始化为 undefined)
var y = 20;

console.log(z); // ReferenceError: Cannot access 'z' before initialization
let z = 30;

对比分析：

• var 声明的变量会被提升，且初始化为 undefined，所以可以访问。
• let 声明的变量会被提升，但未初始化，因此会报 ReferenceError。

---

示例 3：块作用域中的 TDZ

{
  console.log(a); // ReferenceError: Cannot access 'a' before initialization
  let a = 5;
}

分析：

• a 被提升到块作用域的顶部，但在 let a = 5; 之前处于 TDZ，因此访问会报错。

---

示例 4：函数参数与 TDZ

function test(x = y, y = 10) {
  console.log(x, y);
}

test(); // ReferenceError: Cannot access 'y' before initialization

分析：

• 函数参数按顺序解析，x = y 依赖 y，但此时 y 尚未初始化，处于 TDZ。

---

避免临时性死区的注意事项

1. 声明变量时立即赋值： 避免在变量声明之前访问变量。

   let x = 10;
   console.log(x); // 10
   

2. 尽量减少块作用域的复杂性： 避免在块作用域内，声明之前使用变量。

   if (true) {
       let x = 5;
       console.log(x); // 5
   }
   

3. 慎用函数参数的默认值： 确保默认值不依赖尚未声明的变量。

---

为什么有 TDZ？

1. 设计安全性：
   TDZ 防止开发者访问未初始化的变量，从而减少潜在的逻辑错误。

2. let 和 const 的特性：
   TDZ 是为了保证 let 和 const 声明的变量始终是“块作用域”的，同时与 var 的行为区分开。

---

总结

• 定义：临时性死区是 let 和 const 声明的变量在代码块中，从作用域开始到变量声明之间的区域，变量不可访问。
• 表现：在 TDZ 中访问变量会抛出 ReferenceError。
• 作用：确保变量声明的安全性和行为的确定性，避免访问未初始化的变量。