暂时性死区(TDZ)概念

ECMAScript 6 引入了let和const声明变量的方式，与var不同，它们存在暂时性死区（Temporal Dead Zone, TDZ）的特性。TDZ 是变量在声明前无法访问的代码区域，这一机制有效避免了变量提升带来的潜在问题。

暂时性死区的定义

暂时性死区是指从代码块开始到变量声明语句执行前的区域。在此区域内访问变量会抛出ReferenceError。这与var的变量提升行为形成鲜明对比：

// var 的变量提升
console.log(foo); // 输出 undefined
var foo = 1;

// let 的暂时性死区
console.log(bar); // ReferenceError: bar is not defined
let bar = 2;

TDZ 的触发条件

TDZ 不仅存在于let和const声明中，以下场景也会触发：

1. 块级作用域内：在{}代码块中使用let/const
2. 函数参数默认值：当参数默认值引用后续参数时
3. 类声明：类声明也存在类似 TDZ 的行为

// 函数参数默认值的 TDZ
function tdzExample(a = b, b = 1) {
  console.log(a, b);
}
tdzExample(); // ReferenceError: b is not defined

// 类声明的 TDZ
new MyClass(); // ReferenceError: MyClass is not defined
class MyClass {}

TDZ 的运行时机制

JavaScript 引擎在解释执行时会进行以下处理：

1. 遇到块级作用域时，立即为所有let/const变量绑定标识符
2. 这些变量被标记为"未初始化"状态
3. 直到执行到声明语句时才完成初始化

{
  // 此处开始 TDZ
  console.log(typeof value); // ReferenceError
  let value = "hello";
  // 此处结束 TDZ
}

典型应用场景分析

循环中的 TDZ

for循环头部的let声明会为每次迭代创建新的绑定：

let funcs = [];
for (let i = 0; i < 3; i++) {
  funcs.push(() => console.log(i));
}
funcs[0](); // 0
funcs[1](); // 1

模块导入的 TDZ

ES6 模块的导入也存在类似 TDZ 的行为：

console.log(api); // ReferenceError
import { api } from './module.js';

常见误区与规避方法

1. typeof 操作符的陷阱：在 TDZ 内使用typeof不再安全

   console.log(typeof undeclaredVar); // "undefined"
   console.log(typeof tdzVar); // ReferenceError
   let tdzVar;
   

2. 规避方案：

   • 始终在作用域顶部声明变量
   • 避免在声明前访问任何let/const变量
   • 使用函数表达式替代函数声明（当需要条件声明时）

// 安全的使用方式
function safeExample() {
  let value = "initial";
  if (true) {
    value = "updated";
    let inner = "shadow";
  }
  console.log(value); // "updated"
}

与闭包的交互影响

TDZ 会影响闭包中变量的捕获时机：

function closureExample() {
  let func;
  {
    let privateVar = "secret";
    func = () => privateVar;
    // privateVar 的 TDZ 在此结束
  }
  console.log(func()); // "secret"
}

编译器的静态检查

现代 JavaScript 引擎会在编译阶段检测明显的 TDZ 违规：

function staticCheck() {
  if (false) {
    console.log(value); // 即使不会执行，也会触发 TDZ 错误
  }
  let value;
}