JS `Temporal Dead Zone` (TDZ)：理解 `let`/`const` 变量的生命周期

嘿，大家好！今天咱们来聊聊JavaScript里一个听起来有点吓人，但其实挺有意思的概念：“Temporal Dead Zone”，简称TDZ，中文可以叫做“暂时性死区”。

啥是“暂时性死区”？听起来像恐怖片名儿，实际上它是跟let和const变量的生命周期息息相关的。搞懂了它，以后写代码就能少踩坑，避免一些莫名其妙的错误。

开场白：变量声明的那些事儿

要理解TDZ，首先得回顾一下JavaScript里变量声明的那些事儿。以前我们用var声明变量，那感觉就像进了自助餐厅，啥都能拿，啥都能用。var声明的变量会“变量提升”（hoisting），也就是在代码执行之前，JavaScript引擎会先把var声明的变量“提升”到作用域的顶部，但注意，仅仅是声明被提升了，赋值操作还在原地。

举个例子：

console.log(x); // 输出 undefined，不会报错！
var x = 10;

这段代码不会报错，因为var x被提升到顶部了，相当于：

var x; // 声明提升
console.log(x); // x 此时是 undefined
x = 10; // 赋值

所以，即使在声明之前使用x，也不会报错，只是得到undefined。这在某些情况下可能会带来意想不到的bug。

let和const：规则制定者登场

ES6引入了let和const，它们就像两位纪律严明的“警察”，对变量的声明和使用有了更严格的规定。let和const声明的变量也有“变量提升”，但跟var不同，它们的提升是“不完整”的。变量会被提升，但是不会被初始化为undefined，而是处于一个“未初始化”的状态。

这就是TDZ开始发挥作用的地方了。

TDZ：禁止通行的禁区

TDZ指的是变量声明之前的区域，在这个区域内访问let或const声明的变量，会抛出一个ReferenceError错误。就像进入了一个禁止通行的禁区，强行闯入就会被“警察”逮捕。

看个例子：

console.log(y); // 报错：ReferenceError: Cannot access 'y' before initialization
let y = 20;

这段代码会报错，因为在let y = 20;之前，y处于TDZ中，不能被访问。

TDZ的生命周期

一个let或const变量的生命周期可以分为三个阶段：

声明阶段 (Declaration)：变量被声明，但还未初始化。此时变量处于TDZ中。
初始化阶段 (Initialization)：变量被赋值，离开TDZ。
使用阶段 (Usage)：变量可以被访问和使用。

用表格来更清晰地展示：

变量声明方式	声明阶段	初始化阶段	使用阶段	TDZ
`var`	提升，初始化为`undefined`	赋值时	赋值后	无
`let`	提升，未初始化	赋值时	赋值后	声明到赋值之间
`const`	提升，未初始化	声明时必须赋值	赋值后	声明到赋值之间

TDZ的实际应用场景

TDZ并非只是一个理论概念，它在实际开发中也会影响我们的代码。

循环中的TDZ

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

for (var j = 0; j < 3; j++) {
  setTimeout(() => {
    console.log(j); // 输出 3, 3, 3
  }, 0);
}

在这个例子中，let在每次循环迭代时都会创建一个新的变量i，因此setTimeout中的回调函数可以访问到正确的i值。而var声明的j只有一个，在循环结束后j的值变成了3，所以setTimeout中的回调函数都访问的是同一个j，输出的结果是3, 3, 3。

函数参数的TDZ

function greet(name = 'World') {
  console.log(`Hello, ${name}!`);
}

greet(); // 输出 Hello, World!
greet('Alice'); // 输出 Hello, Alice!

function greet2(name = myName, myName = 'World') {
  console.log(`Hello, ${name}!`);
}

// greet2(); // 报错：ReferenceError: Cannot access 'myName' before initialization

在greet函数中，name的默认值是在name未传递时使用的，没有TDZ的问题。但是在greet2函数中，name的默认值依赖于myName，而myName在name的默认值之前被声明，导致myName处于TDZ中，所以会报错。

块级作用域中的TDZ

{
  console.log(message); // 报错：ReferenceError: Cannot access 'message' before initialization
  let message = 'Hello!';
}

在块级作用域中，message在let声明之前处于TDZ中，因此访问message会导致错误。

TDZ的意义和价值

TDZ的设计并非为了增加编程的难度，而是为了：

避免意外的变量提升带来的bug：var的变量提升可能会导致一些难以追踪的bug，TDZ可以避免这种情况。
提高代码的可读性和可维护性：TDZ强制开发者在使用变量之前必须先声明，这有助于提高代码的可读性和可维护性。
更好地支持ES6的块级作用域：TDZ是let和const实现块级作用域的关键。

TDZ与typeof操作符

typeof操作符在遇到未声明的变量时，不会抛出错误，而是返回"undefined"。

console.log(typeof undeclaredVariable); // 输出 "undefined"

但是，如果typeof操作符遇到处于TDZ中的变量时，仍然会抛出ReferenceError。

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

这说明TDZ的优先级高于typeof操作符。

避免TDZ的技巧

要避免TDZ带来的问题，最简单的方法就是：

在变量使用之前声明它们：这听起来很简单，但却是避免TDZ问题的最有效方法。
避免在声明之前访问变量：尽量避免在变量声明之前使用它们，即使你知道它们会被提升。
注意函数参数的默认值：如果函数参数的默认值依赖于其他变量，确保这些变量在使用之前已经被声明。
理解块级作用域：理解let和const的块级作用域，避免在块级作用域中出现TDZ问题。

一些有趣的思考

TDZ的设计在JavaScript社区中也存在一些争议。有些人认为TDZ增加了编程的复杂度，使得JavaScript更难学习和使用。但另一些人认为TDZ是必要的，它可以避免一些潜在的bug，提高代码的质量。

无论如何，TDZ已经成为JavaScript语言的一部分，我们需要理解它，掌握它，并学会如何避免它带来的问题。

总结：TDZ不是敌人，而是朋友

TDZ听起来有点吓人，但实际上它是一种很有用的机制，可以帮助我们编写更安全、更可靠的JavaScript代码。只要我们理解了TDZ的原理，并遵循一些简单的规则，就可以避免它带来的问题，并从中受益。

记住，TDZ不是敌人，而是朋友，它可以帮助我们成为更好的JavaScript开发者。

最后：留个小作业

请分析以下代码，并预测输出结果：

function test() {
  console.log(a);
  console.log(b);
  var a = 1;
  let b = 2;
  console.log(a);
  console.log(b);
}

test();

请说明为什么会得到这样的结果，并解释TDZ在其中起到的作用。

好啦，今天的分享就到这里，希望对大家有所帮助！下次再见！

发表回复 取消回复

发表回复取消回复