let、const和var声明变量的区别

1. 基本语法与使用

var

• 传统变量声明方式，自JavaScript诞生之初就存在
• 可以声明一个变量，可选地初始化一个值
• 示例：var x = 10;

let

• ES6引入的新的变量声明方式
• 用于声明可重新赋值的变量
• 示例：let y = 20; y = 30; // 允许

const

• ES6引入的新的变量声明方式
• 用于声明常量，一旦声明不能重新赋值
• 示例：const z = 40; z = 50; // 报错
• 注意：const声明的是常量引用，不是常量值。对于对象和数组，内部属性可以修改

2. 作用域差异

var

• 函数作用域：只在函数内部有效，在代码块（如if语句、for循环）中声明的变量会泄漏到外部函数或全局作用域
• 示例：

function example() {
  if (true) {
    var x = 10;
  }
  console.log(x); // 输出10，x在if块外仍可访问
}

let和const

• 块级作用域：只在声明它们的代码块（{}）内有效
• 示例：

function example() {
  if (true) {
    let y = 20;
    const z = 30;
  }
  console.log(y); // 报错，y未定义
  console.log(z); // 报错，z未定义
}

3. 变量提升（Hoisting）

var

• 存在变量提升：变量声明会被提升到其作用域的顶部
• 初始化不会被提升，只提升声明
• 示例：

console.log(a); // 输出undefined，不会报错
var a = 5;
// 等价于：
var a;
console.log(a); // undefined
a = 5;

let和const

• 存在变量提升，但存在暂时性死区（TDZ）：虽然变量声明在编译阶段也会被提升，但在声明之前访问这些变量会导致ReferenceError
• 示例：

console.log(b); // 报错：ReferenceError，Cannot access 'b' before initialization
let b = 10;

console.log(c); // 报错：ReferenceError，Cannot access 'c' before initialization
const c = 20;

4. 重复声明

var

• 允许在同一作用域内重复声明同一个变量
• 后面的声明会覆盖前面的声明
• 示例：

var x = 10;
var x = 20; // 允许，x现在为20
console.log(x); // 输出20

let和const

• 不允许在同一作用域内重复声明同一个变量
• 重复声明会导致语法错误
• 示例：

let y = 10;
let y = 20; // 报错：Identifier 'y' has already been declared

const z = 10;
const z = 20; // 报错：Identifier 'z' has already been declared

5. 全局对象属性绑定

var

• 在全局作用域声明的var变量会成为全局对象（浏览器中是window）的属性
• 示例：

var globalVar = "测试";
console.log(window.globalVar); // 输出"测试"

let和const

• 在全局作用域声明的let和const变量不会成为全局对象的属性
• 示例：

let globalLet = "测试";
const globalConst = "测试";
console.log(window.globalLet); // 输出undefined
console.log(window.globalConst); // 输出undefined

6. 暂时性死区（Temporal Dead Zone, TDZ）

var

• 没有暂时性死区，变量声明会被提升，访问未初始化的var变量会得到undefined

let和const

• 存在暂时性死区：从作用域开始到变量声明之间的区域，不能访问变量
• 在TDZ中访问变量会导致ReferenceError
• 示例：

{
  // TDZ开始
  console.log(myVar); // ReferenceError
  let myVar = 10; // TDZ结束
}

7. 最佳实践

现代JavaScript开发建议

• 默认使用const：如果不需要重新赋值，优先使用const
• 需要重新赋值时使用let：只有当变量需要被重新赋值时才使用let
• 避免使用var：var的函数作用域和变量提升特性容易导致意外行为和bug

使用场景对比

• const：声明不会改变的引用，如常量值、函数声明、对象引用（尽管对象内容可变）
• let：声明需要重新赋值的变量，如循环计数器、条件变化的值
• var：在现代代码中基本不使用，除非需要维护遗留代码或特定场景（如在全局作用域声明需要挂载到window对象的变量）

总结图表