关键字 var 多年来一直是 JavaScript 中声明变量的默认方式。但是，它有一些怪癖和陷阱，可能会导致代码出现意外行为。现代替代方案（如 let 和 const）解决了许多此类问题，使它们成为大多数情况下声明变量的首选。

1️⃣ 提升：var 在不知不觉中声明变量！

？解释：

在 JavaScript 中，var 声明被提升到其作用域的顶部，这意味着即使声明稍后出现在代码中，它们也会被初始化为未定义。这可能会导致令人困惑的行为并导致难以检测的错误。

？要点：

• ？ 提升操作：变量声明被移动到作用域的顶部，但它们的赋值却没有。
• ？ 意外的未定义值： 变量可以在赋值之前使用，从而导致意外的未定义结果。

？例子：

console.log(myVar);  // undefined (hoisted but not initialized)
var myVar = 10;
console.log(myVar);  // 10

？注释： 变量 myVar 被提升到作用域的顶部，但最初是未定义的，这可能会导致代码混乱。

？使固定：

• ？ 使用let或const：这些关键字的提升方式与var不同，这有助于防止此问题。

？修复示例：

console.log(myLet);  // ReferenceError: myLet is not defined
let myLet = 10;
console.log(myLet);  // 10

？注释： 使用 let 可以防止变量在声明之前被访问，从而减少混乱和潜在的错误。

2️⃣ 函数作用域与块作用域：var 可以泄漏出块！

？解释：

var 的主要缺陷之一是它是函数作用域，而不是块作用域。这意味着在循环、if 语句或其他块内声明的变量不限于该块，而是可以在其外部访问，这可能会导致错误。

？要点：

• ？ 函数作用域： var 的作用域为最近的函数，即使在循环或 if 语句等块内声明也是如此。
• ？ 泄漏变量：这可能会导致变量无意中泄漏出块，从而导致不可预测的行为。

？例子：

if (true) {
  var blockVar = "I’m accessible outside this block";
}
console.log(blockVar);  // "I’m accessible outside this block"

？注释： 虽然 blockVar 是在 if 块内声明的，但它仍然可以在块外访问，因为 var 是函数作用域，而不是块作用域。

？使固定：

• ？ 使用let或const：这些关键字是块作用域的，这意味着它们只能在定义它们的块内访问。

？修复示例：

if (true) {
  let blockLet = "I’m only accessible inside this block";
}
console.log(blockLet);  // ReferenceError: blockLet is not defined

？注释： 使用 let 或 const 可确保变量保持在各自的块内，防止作用域泄漏。

3️⃣ 重新声明问题：var 让您可以声明相同的变量两次！

？解释：

使用 var，您可能会意外地在同一作用域中重新声明同一变量，这可能会覆盖以前的值。这可能会导致无意的错误，尤其是在较大的代码库中，变量名称可能会被错误地重用。

？要点：

• ？ 重新声明变量： var 允许您在同一范围内重新声明变量，可能会覆盖现有值。
• ？ 意外覆盖：这可能会导致难以检测的错误，尤其是在大型或复杂的函数中。

？例子：

var name = "Alice";
var name = "Bob";  // No error, overwrites the previous value
console.log(name);  // "Bob"

？注释： 第二个名称声明会覆盖第一个名称，可能会导致代码中的错误。

？使固定：

• ？ 使用let或const：这些关键字可以防止您在同一范围内重新声明变量，从而降低意外覆盖的风险。

？修复示例：

let name = "Alice";
let name = "Bob";  // SyntaxError: Identifier 'name' has already been declared

？评论： 使用 let 或 const 可以帮助您避免重新声明变量并确保您的代码保持可预测性。

4️⃣ 循环中的 var：异步代码中潜在的错误

？解释：

在循环中使用 var 时，变量的值可能会以意想不到的方式更改，尤其是在使用异步代码时。由于 var 是函数作用域而不是块作用域，因此在异步回调内部访问时，循环变量可能会包含意外值。

？要点：

• ？ 循环变量：循环内用 var 声明的变量不限于循环块，导致稍后访问时可能出现错误。
• ⏳ 异步问题： 这可能会导致 setTimeout 或 Promise 等异步操作中出现错误，其中循环变量可能具有意外值。

？例子：

for (var i = 0; i  console.log(i), 1000);  // Prints: 3, 3, 3 (unexpected)
}

？注释： 因为 var 不是块作用域，所以循环变量 i 在所有迭代中共享，并且其最终值 (3) 在每个 setTimeout 回调中使用。

？使固定：

• ⛓ 使用let： let关键字是块作用域的，确保循环的每次迭代都获得自己独立的循环变量值。

？修复示例：

for (let i = 0; i  console.log(i), 1000);  // Prints: 0, 1, 2 (as expected)
}

？评论： 使用 let 为每次迭代创建一个新的 i 实例，修复异步回调问题并确保打印正确的值。

5️⃣ var 和闭包：混乱的根源

？解释：

闭包与 var 结合使用时可能会导致意外行为。由于 var 是函数作用域的，因此当闭包捕获它时，它的值可能会以意想不到的方式发生变化。

？要点：

• ？ JavaScript 中的闭包： 闭包是一种即使在外部函数执行完毕后仍能记住其周围作用域的函数。
• ？ 共享变量问题：当 var 在闭包内使用时，捕获的变量可能会在所有闭包之间共享，从而导致意外行为。

？例子：

function createFunctions() {
  var funcs = [];
  for (var i = 0; i 



？评论： 所有闭包都捕获相同的 i 值，因为 var 是函数范围的，导致意外结果。

？使固定：

• ？ 使用let：通过使用let，每个闭包捕获循环变量的一个新实例，解决了问题。

？修复示例：

function createFunctions() {
  var funcs = [];
  for (let i = 0; i 



？评论： 使用 let，每个闭包都会获得自己的 i 副本，解决问题并确保打印预期值。





  
  
  ？结论：是时候告别 var


虽然 var 是 JavaScript 中声明变量的原始方式，但它有几个缺点，使其成为现代 JavaScript 开发中的糟糕选择。 let 和 const 的引入提供了更好的作用域，降低了错误风险，并使代码更具可预测性。为了编写更干净、更易于维护的 JavaScript，是时候从 var 转向使用 let 和 const。