js 暂时性死区是什么？

在 JavaScript 中，"暂时性死区"（Temporal Dead Zone，简称 TDZ）是 ES6 引入 let 和 const 关键字时带来的一个新概念。它指的是在块级作用域（如函数、块或循环）内，从变量声明的开始位置到变量初始化之间的这个区域。在这个区域内，变量是不可访问的，访问它们会导致 ReferenceError 错误。

什么是暂时性死区？

在 ES5 及之前的版本中，只有全局作用域和函数作用域，变量提升（hoisting）会导致变量声明被提升到作用域的顶部，但初始化不会提升。因此，即使你在声明之前就访问变量，它也不会报错，只是值是 undefined。

// ES5 及之前
console.log(a); // 输出: undefined
var a = 2;

然而，在 ES6 中引入了块级作用域（通过 let 和 const），并且引入了暂时性死区的概念。这意味着在变量声明之前的区域，变量是不可访问的。

// ES6
console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 3;

暂时性死区的例子

以下是一些展示暂时性死区的例子：

例子 1：在声明前访问 let 变量

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

在这个例子中，尝试在 let x 声明之前就访问 x 会导致 ReferenceError。

例子 2：在条件语句中

if (true) {
    console.log(y); // ReferenceError: Cannot access 'y' before initialization
    let y = 20;
}

即使在条件语句中，let 变量在声明前也是不可访问的。

例子 3：在循环中

for (let i = 0; i < 3; i++) {
    // 不能在循环前访问 i
    // console.log(i); // 如果放在这里会导致错误
    console.log('Inside loop:', i); // 0, 1, 2
}

在 for 循环中，let i 在循环开始之前也是不可访问的。

注意事项

1. 函数声明和 let/const 声明: 函数声明也会被提升，但不会被提升到暂时性死区内。然而，如果在块级作用域中使用函数声明，会导致行为不一致，因此不推荐在块级作用域中使用函数声明。

{
    console.log(foo()); // 正确，输出: "bar"
    function foo() {
        return "bar";
    }
}

{
    console.log(baz()); // ReferenceError: baz is not defined
    let baz = function() {
        return "qux";
    };
}

2. var 不受暂时性死区影响: var 声明仍然会被提升到函数或全局作用域的顶部，不会受到暂时性死区的影响。

{
    console.log(qux); // 输出: undefined
    var qux = 42;
}

结论

暂时性死区是 JavaScript ES6 引入的一个重要概念，用于确保块级作用域内变量的正确行为。它避免了在变量初始化之前就访问变量的情况，从而减少了潜在的错误。理解暂时性死区有助于编写更加健壮和可维护的 JavaScript 代码。

本文地址：https://www.tides.cn/p_js-temporal-dead-zone