JavaScript 中的 let vs. var：深入解析其差异

2023-09-10 11:10:25

JavaScript 中的 let 与 var：深入探讨其差异

在 JavaScript 中，var 和 let 都是用于声明变量的。尽管它们看起来相似，但它们在行为和语义上却有根本性的差异。本文将深入探讨 let 和 var 的特性，重点关注它们在作用域、提升、重新声明和重新赋值方面的区别。

作用域

var 声明的变量具有全局或函数作用域，这意味着它们可以在声明它们所在的作用域或任何嵌套作用域中访问。另一方面，let 声明的变量具有块级作用域，这意味着它们只能在声明它们所在的块或其任何嵌套块中访问。

// 全局作用域
var globalVar = 10;

// 函数作用域
function exampleFunction() {
  var functionVar = 20;
  
  // 块级作用域
  {
    let blockVar = 30;
  }
  
  console.log(globalVar, functionVar); // 10, 20
  console.log(blockVar); // ReferenceError: blockVar is not defined
}

exampleFunction();

在这个示例中，globalVar 是全局作用域变量，可以在任何地方访问。functionVar 是函数作用域变量，仅在 exampleFunction 函数内可以访问。blockVar 是块级作用域变量，仅在它被声明的块中可以访问。

提升

var 声明的变量在执行代码之前会被提升到函数作用域或全局作用域。这意味着可以在声明它们之前访问 var 变量，并且它们的值将始终为 undefined。

let 声明的变量不会被提升。它们仅在声明它们所在的块或其任何嵌套块中可用。

console.log(globalVar); // undefined
console.log(functionVar); // ReferenceError: functionVar is not defined
console.log(blockVar); // ReferenceError: blockVar is not defined

var globalVar = 10;

function exampleFunction() {
  let functionVar = 20;
  
  {
    let blockVar = 30;
  }
  
  console.log(globalVar, functionVar); // 10, 20
  console.log(blockVar); // ReferenceError: blockVar is not defined
}

exampleFunction();

在这个示例中，globalVar 在声明之前被访问，所以输出 undefined。functionVar 在声明之前被访问，因此会引发 ReferenceError。blockVar 在声明之前被访问，也会引发 ReferenceError。

重新声明

var 声明的变量可以在同一作用域内多次重新声明，每次重新声明都会创建一个新的变量。

let 声明的变量不能在同一作用域内重新声明。如果尝试重新声明一个 let 变量，将引发 SyntaxError。

// 全局作用域
var globalVar = 10;
var globalVar = 20; // 重新声明

// 函数作用域
function exampleFunction() {
  var functionVar = 20;
  var functionVar = 30; // 重新声明
  
  // 块级作用域
  {
    let blockVar = 30;
    let blockVar = 40; // SyntaxError: Identifier 'blockVar' has already been declared
  }
}

exampleFunction();

在这个示例中，globalVar 和 functionVar 可以被重新声明，而 blockVar 的重新声明会导致 SyntaxError。

重新赋值

var 和 let 声明的变量都可以重新赋值。

// 全局作用域
var globalVar = 10;
globalVar = 20; // 重新赋值

// 函数作用域
function exampleFunction() {
  let functionVar = 20;
  functionVar = 30; // 重新赋值
}

exampleFunction();