JavaScript中var、let和const的区别

基本区别概述

在JavaScript中，var、let和const都用于声明变量，但它们在作用域、提升行为、重复声明和值可变性等方面有显著区别。var是ES5及之前版本的变量声明方式，而let和const是ES6（ES2015）引入的新特性。

作用域区别

var的函数作用域

var声明的变量具有函数作用域，意味着在函数内部声明的变量在整个函数内都可用，而在函数外部不可访问。

function example() {
  var x = 10;
  if (true) {
    var y = 20;
    console.log(x); // 10
    console.log(y); // 20
  }
  console.log(x); // 10
  console.log(y); // 20 - y在if块外仍然可访问
}
example();
console.log(typeof x); // undefined
console.log(typeof y); // undefined

let和const的块级作用域

let和const声明的变量具有块级作用域，意味着它们只在声明它们的代码块（由{}包围的区域）内有效。

function example() {
  let x = 10;
  const y = 20;
  if (true) {
    let z = 30;
    console.log(x); // 10
    console.log(y); // 20
    console.log(z); // 30
  }
  console.log(x); // 10
  console.log(y); // 20
  console.log(z); // ReferenceError: z is not defined
}
example();

变量提升区别

var的变量提升

使用var声明的变量会被提升到其作用域的顶部，这意味着可以在声明之前访问它们，但值为undefined。

console.log(x); // undefined
var x = 5;
console.log(x); // 5

// 上面的代码实际上被解释为：
var x;
console.log(x); // undefined
x = 5;
console.log(x); // 5

let和const的临时性死区

let和const声明的变量也会被提升，但是它们不会被初始化，直到代码执行到声明行。这创建了一个临时性死区（Temporal Dead Zone, TDZ），在声明之前访问这些变量会导致ReferenceError。

console.log(x); // ReferenceError: Cannot access 'x' before initialization
let x = 5;
console.log(x); // 5

重复声明区别

var允许重复声明

使用var可以在同一作用域内多次声明同一个变量，后续声明会覆盖前面的值。

var x = 5;
console.log(x); // 5
var x = 10;
console.log(x); // 10

let和const不允许重复声明

let和const不允许在同一作用域内重复声明同一个变量，否则会抛出SyntaxError。

let x = 5;
let x = 10; // SyntaxError: Identifier 'x' has already been declared

const y = 5;
const y = 10; // SyntaxError: Identifier 'y' has already been declared

值的可修改性区别

var和let允许重新赋值

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

var x = 5;
console.log(x); // 5
x = 10;
console.log(x); // 10

let y = 5;
console.log(y); // 5
y = 10;
console.log(y); // 10

const的限制

const声明的变量是常量，不允许重新赋值。但是，对于对象和数组等引用类型，const只保证引用不变，不保证内容不变。

const x = 5;
x = 10; // TypeError: Assignment to constant variable.

const obj = { name: "Alice" };
obj.name = "Bob"; // 允许修改对象属性
console.log(obj); // { name: "Bob" }

obj = {}; // TypeError: Assignment to constant variable.

const arr = [1, 2, 3];
arr.push(4); // 允许修改数组内容
console.log(arr); // [1, 2, 3, 4]

arr = [5, 6]; // TypeError: Assignment to constant variable.

全局对象属性区别

var创建全局对象属性

在全局作用域中使用var声明的变量会成为全局对象（浏览器中是window，Node.js中是global）的属性。

var x = 5;
console.log(window.x); // 5 (在浏览器中)

let和const不创建全局对象属性

在全局作用域中使用let和const声明的变量不会成为全局对象的属性。

let y = 5;
console.log(window.y); // undefined (在浏览器中)

const z = 5;
console.log(window.z); // undefined (在浏览器中)

使用建议和最佳实践

1. 优先使用const：默认情况下，应该使用const声明变量。这有助于防止意外的重新赋值，使代码更可预测。

2. 需要重新赋值时使用let：只有当你知道变量需要被重新赋值时，才使用let。

3. 避免使用var：在现代JavaScript开发中，应该避免使用var，因为它的函数作用域和变量提升特性可能导致意外的行为和bug。

4. 块级作用域的优势：let和const的块级作用域使代码更加安全和可读，特别是在循环和条件语句中。

对比图表

代码示例对比

// 作用域对比
function scopeExample() {
  var varVariable = "I'm var";
  let letVariable = "I'm let";
  const constVariable = "I'm const";

  if (true) {
    var varInBlock = "I'm var in block";
    let letInBlock = "I'm let in block";
    const constInBlock = "I'm const in block";
  }

  console.log(varVariable); // "I'm var"
  console.log(letVariable); // "I'm let"
  console.log(constVariable); // "I'm const"
  
  console.log(varInBlock); // "I'm var in block"
  console.log(letInBlock); // ReferenceError: letInBlock is not defined
  console.log(constInBlock); // ReferenceError: constInBlock is not defined
}
scopeExample();

// 变量提升对比
// console.log(varHoisted); // undefined
// console.log(letHoisted); // ReferenceError: Cannot access 'letHoisted' before initialization
// console.log(constHoisted); // ReferenceError: Cannot access 'constHoisted' before initialization

var varHoisted = "I'm hoisted with var";
let letHoisted = "I'm hoisted with let, but in TDZ";
const constHoisted = "I'm hoisted with const, but in TDZ";

// 重复声明对比
var reDeclaredVar = "First declaration";
var reDeclaredVar = "Second declaration"; // 允许

let reDeclaredLet = "First declaration";
// let reDeclaredLet = "Second declaration"; // SyntaxError: Identifier 'reDeclaredLet' has already been declared

const reDeclaredConst = "First declaration";
// const reDeclaredConst = "Second declaration"; // SyntaxError: Identifier 'reDeclaredConst' has already been declared

// 值的可修改性对比
var mutableVar = "Initial value";
mutableVar = "New value"; // 允许

let mutableLet = "Initial value";
mutableLet = "New value"; // 允许

const immutableConst = "Initial value";
// immutableConst = "New value"; // TypeError: Assignment to constant variable

// const与对象和数组
const constObj = { name: "Alice" };
constObj.name = "Bob"; // 允许修改对象属性
// constObj = {}; // TypeError: Assignment to constant variable

const constArr = [1, 2, 3];
constArr.push(4); // 允许修改数组内容
// constArr = [5, 6]; // TypeError: Assignment to constant variable

总结

var、let和const是JavaScript中声明变量的三种方式，它们的主要区别在于：

1. 作用域：var具有函数作用域，而let和const具有块级作用域。
2. 变量提升：var声明的变量会被提升并初始化为undefined，而let和const声明的变量虽然也会被提升，但不会初始化，进入临时性死区直到声明执行。
3. 重复声明：var允许在同一作用域内重复声明，而let和const不允许。
4. 值可变性：var和let允许重新赋值，而const不允许重新赋值（但对于对象和数组，允许修改其内容）。
5. 全局对象属性：在全局作用域中，var声明的变量会成为全局对象的属性，而let和const不会。

在现代JavaScript开发中，推荐优先使用const，在需要重新赋值时使用let，并尽量避免使用var。

参考资料：

• MDN: var
• MDN: let
• MDN: const
• Temporal Dead Zone (TDZ) Explained