let与var的区别

在JavaScript中，let 和 var 都是用于声明变量的关键字，但它们在作用域、提升（hoisting）和重复声明等方面有一些重要的区别。以下是这些区别的详细说明：

1. 作用域

• var：具有函数作用域（function scope）。如果在函数内声明，变量在该函数内有效；如果在函数外声明，变量在全局作用域内有效。
• let：具有块作用域（block scope）。变量在声明它的块（即 {} 内）内有效。

示例

JavaScript复制

// 使用 var
var x = 1;
if (true) {
  var x = 2;
  console.log(x); // 输出 2
}
console.log(x); // 输出 2

// 使用 let
let y = 1;
if (true) {
  let y = 2;
  console.log(y); // 输出 2
}
console.log(y); // 输出 1

2. 提升（Hoisting）

• var：变量声明会被提升到函数或全局作用域的顶部，但初始化不会提升。这意味着你可以在声明之前访问变量，但它的值会是 undefined。
• let：变量声明和初始化都不会被提升。在块的顶部之前访问 let 声明的变量会抛出 ReferenceError。

示例

JavaScript复制

// 使用 var
console.log(x); // 输出 undefined
var x = 1;
console.log(x); // 输出 1

// 使用 let
console.log(y); // 抛出 ReferenceError
let y = 1;
console.log(y); // 输出 1

3. 重复声明

• var：允许在同一个作用域内多次声明同一个变量，后面的声明会覆盖前面的声明。
• let：不允许在同一个作用域内多次声明同一个变量，否则会抛出 SyntaxError。

示例

JavaScript复制

// 使用 var
var a = 1;
var a = 2;
console.log(a); // 输出 2

// 使用 let
let b = 1;
let b = 2; // 抛出 SyntaxError

4. 临时死区（Temporal Dead Zone, TDZ）

• let：在块的顶部到变量声明之间的区域称为临时死区。在这个区域内，变量是不可访问的，访问会抛出 ReferenceError。
• var：没有临时死区的概念，变量声明会被提升到作用域的顶部。

示例

JavaScript复制

// 使用 let
{
  console.log(z); // 抛出 ReferenceError
  let z = 3;
  console.log(z); // 输出 3
}

// 使用 var
{
  console.log(w); // 输出 undefined
  var w = 4;
  console.log(w); // 输出 4
}

5. 全局对象属性

• var：在全局作用域中声明的变量会成为全局对象（如 window）的属性。
• let：在全局作用域中声明的变量不会成为全局对象的属性。

示例

JavaScript复制

// 使用 var
var globalVar = 1;
console.log(window.globalVar); // 输出 1

// 使用 let
let globalLet = 2;
console.log(window.globalLet); // 输出 undefined

总结

• var：函数作用域，变量声明会被提升，允许重复声明，会成为全局对象的属性。
• let：块作用域，变量声明和初始化不会被提升，不允许重复声明，不会成为全局对象的属性，存在临时死区。

在现代JavaScript开发中，推荐使用 let 和 const（用于声明常量）来代替 var，因为它们提供了更严格和更可预测的作用域规则，有助于减少变量提升和作用域相关的错误。