JavaScript中var、let和const关键字的区别

1. 基本定义与语法

var：JavaScript最早的变量声明方式，从ES1开始存在。

var name = 'John';

let：ES6（ECMAScript 2015）引入，用于声明块级作用域的变量。

let age = 30;

const：ES6引入，用于声明块级作用域的常量。

const PI = 3.14159;

2. 作用域差异

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 - 因为var具有函数作用域，不是块级作用域
}

let：具有块级作用域。只在声明它的块（由{}界定）内有效。

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

const：与let一样，也具有块级作用域。

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

3. 变量提升（Hoisting）行为

var：存在变量提升，变量声明会被提升到其作用域的顶部，但初始化不会提升。

console.log(name); // undefined - 不会报错，因为声明被提升了
var name = 'John';
console.log(name); // John

上面的代码实际上是这样执行的：

var name; // 声明被提升到顶部
console.log(name); // undefined
name = 'John'; // 初始化留在原位
console.log(name); // John

let：存在暂时性死区（Temporal Dead Zone, TDZ）。虽然声明也会被提升，但在声明之前访问变量会导致ReferenceError。

console.log(age); // ReferenceError - Cannot access 'age' before initialization
let age = 30;

const：与let一样，也存在暂时性死区。

console.log(PI); // ReferenceError - Cannot access 'PI' before initialization
const PI = 3.14159;

4. 重复声明

var：允许在同一作用域内重复声明同一个变量。

var name = 'John';
var name = 'Jane'; // 不会报错
console.log(name); // Jane

let：不允许在同一作用域内重复声明同一个变量。

let age = 30;
let age = 31; // SyntaxError - Identifier 'age' has already been declared

const：与let一样，不允许在同一作用域内重复声明同一个变量。

const PI = 3.14159;
const PI = 3.14; // SyntaxError - Identifier 'PI' has already been declared

5. 初始化要求

var：可以在声明时不初始化，默认值为undefined。

var name;
console.log(name); // undefined
name = 'John';
console.log(name); // John

let：可以在声明时不初始化，默认值为undefined。

let age;
console.log(age); // undefined
age = 30;
console.log(age); // 30

const：声明时必须初始化，否则会报错。

const PI; // SyntaxError - Missing initializer in const declaration

6. 重新赋值

var：可以重新赋值。

var name = 'John';
name = 'Jane';
console.log(name); // Jane

let：可以重新赋值。

let age = 30;
age = 31;
console.log(age); // 31

const：对于基本类型，不能重新赋值。但对于引用类型（如对象、数组），可以修改其属性或元素。

// 基本类型
const PI = 3.14159;
PI = 3.14; // TypeError - Assignment to constant variable

// 引用类型
const person = {
  name: 'John',
  age: 30
};

person.name = 'Jane'; // 允许修改属性
person.age = 31;     // 允许修改属性
console.log(person); // { name: 'Jane', age: 31 }

// 但不能重新赋值整个对象
person = { name: 'Bob', age: 25 }; // TypeError - Assignment to constant variable

7. 全局对象属性

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

var name = 'John';
console.log(window.name); // 'John' (在浏览器环境中)

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

let age = 30;
console.log(window.age); // undefined (在浏览器环境中)

const：与let一样，在全局作用域声明的变量不会成为全局对象的属性。

const PI = 3.14159;
console.log(window.PI); // undefined (在浏览器环境中)

8. 最佳实践和使用场景

var：

• 由于其函数作用域和变量提升的特性，容易导致意外的行为和bug。
• 在现代JavaScript开发中，一般不再推荐使用var。
• 主要用于维护旧代码或需要支持非常旧的浏览器环境。

let：

• 当你需要一个变量，并且这个变量的值在未来可能会改变时，使用let。
• 适用于循环计数器、条件分支中的变量等。

const：

• 当你声明一个变量后不希望它被重新赋值时，使用const。
• 默认情况下，应该优先使用const，只有在确定需要重新赋值时才使用let。
• 适用于常量、配置对象、函数引用、不会改变的数组等。

9. 性能与兼容性考虑

• 在大多数JavaScript引擎中，let和const的性能通常优于var，因为它们具有更明确的作用域规则，有助于引擎进行优化。
• const有时可能比let有微小的性能优势，因为引擎知道它的值不会改变，可以进行更多的优化。
• var：所有浏览器和JavaScript环境都支持。
• let和const：ES6特性，现代浏览器都支持，但在非常旧的浏览器（如IE11及以下）中不支持。
• 如果需要支持旧浏览器，可以使用Babel等工具将ES6代码转译为ES5。

参考资源

• MDN: var
• MDN: let
• MDN: const
• ES6 In Depth: let and const