JavaScript中var、let和const的区别详解

作为全局变量时的不同表现

在全局环境下，这三种声明方式对顶层对象（如浏览器中的window）的影响存在显著区别。在ES5规范中，var声明的全局变量会被直接挂载为顶层对象的属性，这意味着可以通过window.variableName直接访问它们。而在ES6中，为了减少全局污染，使用let或const声明的全局变量虽然可以在全局范围访问，但并不会成为顶层对象的属性。

变量提升机制解析

变量提升是指变量声明会被“移动”到其所在作用域的顶部。这种机制导致了不同声明方式在使用前的行为差异：

• var：支持变量提升。在声明之前访问该变量不会报错，而是返回undefined。
• let 与 const：不支持变量提升。如果在声明语句执行前尝试访问这些变量，引擎会抛出错误。

以下代码展示了这一现象：

// var 的情况
console.log(a) // 输出: undefined
var a = 1

// let 的情况
console.log(b) // 报错: Cannot access 'b' before initialization
let b = 2

// const 的情况
console.log(c) // 报错: Cannot access 'c' before initialization
const c = 3

暂时性死区（TDZ）

与变量提升紧密相关的是let和const特有的“暂时性死区”概念。在ES6中，如果一个区块中存在let或const声明，那么该区块从开始到声明语句执行完毕之前，都称为该变量的“暂时性死区”。在此期间，任何试图读取变量的操作都会导致运行时错误，这是为了防止在变量被正确初始化前就产生不可预期的副作用。

相比之下，var由于存在变量提升，始终处于“定义但未赋值”的状态，因此不存在死区保护。

块级作用域的限制

这是区分新旧声明方式最直观的特征。var不具备块级作用域，它只关心函数作用域和全局作用域。这意味着在if、for等代码块内部用var定义的变量，在块外部依然可以访问。而let和const严格遵守块级作用域规则，离开大括号后变量即不可见。

{
    var a = 2;
    let b = 2;
    const c = 2;
}

console.log(a); // 2 (var 泄露到外部)
console.log(b); // 报错 (let 仅限块内)
console.log(c); // 报错 (const 仅限块内)

重复声明的规则

在相同的作用域下，var允许对同一标识符进行多次声明，后声明的值会覆盖前者且不会报错。这对于习惯了脚本式编写的开发者可能带来隐患。相反，let和const在相同作用域内严禁重复声明，一旦检测到重复，编译器会直接抛出语法错误，从而强制保持代码的清晰性。

var x = 10;
var x = 20; // 合法，x变为20

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

const z = 10;
const z = 20; // 报错

修改声明的变量（值与引用的关系）

var和let声明的是可变变量，可以随时更改绑定的值。而const用于声明常量，意味着该标识符不能重新绑定到其他值。这里有一个常见的误区需要澄清：const声明的是常量引用，而非不可变对象。

对于基本数据类型（如数字、字符串），const确实锁死了值的修改能力。但对于引用数据类型（对象或数组），const锁定的是指针地址。只要不改变指针指向，你可以自由修改对象内部的属性或数组元素，这通常被称为“浅层不可变性”。

// 基本类型 - 完全不可改
const name = "John";
name = "Jane"; // 报错

// 引用类型 - 可修改内容
const user = { role: "admin" };
user.role = "guest"; // 合法：修改了对象属性
user = { role: "guest" }; // 报错：改变了引用地址

总结

通过上述对比可以看出，var的设计存在诸多历史遗留问题，容易导致作用域混乱和作用域泄漏。在现代JavaScript开发中，建议遵循以下原则：默认使用const以保证安全性，仅在必须频繁修改变量时改用let，尽量避免使用var。以上就是JavaScript中var、let和const之间的区别的详细内容，更多关于JavaScript基础语法的资料请关注本站其它相关文章！