JavaScript 中 var 和 let 的作用域和变量提升差异

当使用'var' 和 'let' 声明变量时，它们在作用域和变量提升方面的差异可以通过以下示例来说明：

// 使用 var 声明变量
function exampleVar() {
  console.log(a); // 输出 undefined
  var a = 10;
  console.log(a); // 输出 10
  if (true) {
    var a = 20;
    console.log(a); // 输出 20
  }
  console.log(a); // 输出 20
}

exampleVar();

// 使用 let 声明变量
function exampleLet() {
  console.log(b); // 抛出 ReferenceError: b is not defined
  let b = 10;
  console.log(b); // 输出 10
  if (true) {
    let b = 20;
    console.log(b); // 输出 20
  }
  console.log(b); // 输出 10
}

exampleLet();

在上面的示例中，我们在函数内部使用 'var' 和 'let' 声明了变量 'a' 和 'b'。

在 'exampleVar' 函数中，使用 'var' 声明的变量 'a' 存在变量提升，即在声明之前可以访问变量。因此，第一个 'console.log(a)' 输出 'undefined'，因为变量 'a' 被声明了但尚未赋值。然后，变量 'a' 被赋值为 '10'，并在 if 语句块中被重新赋值为 '20'。最后一个 'console.log(a)' 输出 '20'，因为它访问的是同一作用域中的变量 'a'。

相比之下，在 'exampleLet' 函数中，使用 'let' 声明的变量 'b' 不会发生变量提升。因此，第一个 'console.log(b)' 抛出 'ReferenceError: b is not defined'，因为变量 'b' 在声明之前不可访问。然后，变量 'b' 被赋值为 '10'，并在 if 语句块中被重新赋值为 '20'。最后一个 'console.log(b)' 输出 '10'，因为它访问的是外部作用域中的变量 'b'。

通过这个例子，我们可以看到在使用 'var' 和 'let' 声明变量时，它们在变量提升和作用域方面的不同行为。这使得 'let' 更加可靠和可控，因为它避免了变量提升和全局作用域的可能问题。