JavaScript 中的 Let 与 Var：揭秘范围和临时死区

在 ECMAScript 6 中引入，let 语句引发了开发人员的困惑，特别是它与已建立的 var 关键字有何不同。本文深入研究了这两个变量声明之间的细微差别，重点介绍了它们的作用域规则和最佳用例。

范围

根本区别在于它们的作用域行为。用 var 声明的变量仅限于它们定义的函数（函数作用域），而 let 变量则仅限于它们所包含的块（块作用域）。这意味着让变量具有更窄的范围，防止它们与直接块之外定义的变量交互。

示例：

function run() {
  var foo = "Foo";
  let bar = "Bar";

  console.log(foo, bar); // "Foo Bar"

  {
    var moo = "Mooo"
    let baz = "Bazz";
    console.log(moo, baz); // "Mooo Bazz"
  }

  console.log(moo); // "Mooo"
  console.log(baz); // ReferenceError
}

run();

在上面的示例中，var 变量 moo 即使在其块之外仍然可以访问，而 let 变量 baz 在其块之外访问时会抛出 ReferenceError。

Temporal死区

另一个区别是临时死区 (TDZ)。对于 let 变量，从声明点到定义它们的块末尾存在一个 TDZ。在此期间，访问 let 变量而不进行初始化会导致引用错误。

示例:

function test() {
  console.log(foo); // ReferenceError
  let foo = "Bar";
}

test();

在此代码中，由于 TDZ，在初始化之前访问 let 变量 foo 会导致 ReferenceError。

何时使用 Let 与 Var

一般来说，更喜欢在块内使用 let 来表示变量，以避免污染全局作用域并防止变量名冲突。 Var 对于需要跨多个块或函数访问的变量仍然有用。