JS变量声明var、let、const区别：作用域、提升与常量特性

前言

在JavaScript语言中，声明变量主要依赖三个关键字：var、let和const。

var是ES5标准引入的关键字，由于当时规范对变量作用域的限制较为宽松，使用var声明变量时容易引发一些难以预料的错误。为了解决这一问题，ES6标准引入了let和const，旨在使变量定义更加规范和严谨。

要清晰区分这三个关键字，必须从ES5到ES6的演进差异入手，核心在于理解var与let在作用域和声明机制上的根本不同。

ES5与ES6的区别

1. 作用域

不同关键字对变量作用域的限制是它们最显著的区别，因此var和let的首要差异体现在作用域范围上。

var声明的变量具有函数作用域，这意味着在函数外部无法访问函数内部用var声明的变量。

在编写代码时，常遇到在全局和函数内部声明同名变量的情况。需要明确的是，处于不同作用域的变量彼此独立，互不干扰。

var a = 10;
function logA() {
    var a = 20;
    console.log(a); // 20
}
console.log(a); // 10

let声明的变量具有块级作用域，而块级作用域是函数作用域的子集。可以通过花括号{...}来界定一个块级作用域的范围。

2. 全局属性

当在全局作用域下使用var或let声明变量时，这两个变量都会在整个页面生命周期内存在。

然而，使用var声明的全局变量会自动成为window对象的一个属性；相比之下，使用let声明的全局变量则不会挂载到window对象上。

3. 变量提升与暂时性死区

var声明机制中存在变量提升的现象。

变量的声明、初始化和赋值在逻辑上分为三个步骤。对于var变量，其声明和初始化过程会被提升到当前作用域的顶部执行。

具体而言，当编译器遇到var声明语句时，会先在作用域顶部创建一个该变量，并将其初始值设为undefined。

因此，在代码执行流到达var声明语句之前访问该变量，不会报错，而是返回undefined值。

(function example() {
  console.log(age); // undefined
  var age = 20;
})();

// 相当于
(function example() {
  var age;
  console.log(age); // undefined
  age = 20;
})();

ES6规范对“先访问后声明”的行为进行了严格限制，因此let和const声明会引入TDZ（暂时性死区）的概念。

JavaScript引擎在编译阶段若遇到let或const声明，会将该变量置于暂时性死区中，禁止任何访问。只有当代码执行到具体的声明语句时，变量才会从TDZ中移出并可用。

如果在声明语句之前尝试访问变量，等同于试图访问TDZ内的变量，JavaScript引擎会抛出运行时错误ReferenceError。

ES5的变量提升与ES6的暂时性死区之间的差异，还带来了一个“副作用”，即改变了typeof操作对变量的访问行为。

在ES5环境中，对于未声明变量唯一安全的操作是typeof，该操作会返回undefined值。

TDZ的存在导致即使使用typeof操作，在let或const声明语句执行之前访问这些变量，依然会触发ReferenceError错误。

4. 重复声明

var允许重复声明，可以使用var多次声明同名变量，后声明的变量值会覆盖之前的值。
为了防止这种容易引发混淆的重复声明行为，ES6规定let和const声明的变量不可重复声明，若尝试重复声明将抛出SyntaxError错误。

这一限制不仅适用于let对let的声明，若尝试用let去重复声明一个var变量，同样是不被允许的。

let与const的区别

1. 常量

作为ES6新增的两个变量声明关键字，let和const的核心区别在于：const声明创建的是一个值的只读引用。

所谓只读引用，意味着对于原始数据类型，const声明的变量不允许重新赋值；

对于引用数据类型，const声明不允许重新赋值引用本身（即不能指向新对象），但可以修改对象内部的属性值或数组中的元素。

最佳实践

建议尽量不再使用var。由于let和const已能完全替代var的功能并满足开发需求，同时还能避免诸多潜在问题，因此var已无存在必要。
推荐优先使用const声明变量，let作为次选。const类似于一种保护机制，能有效预防并阻止非预期的变量修改。对于确实需要后续修改值的变量，再使用let声明。

至此，关于JavaScript中var、let和const区别的介绍已完成。如需了解更多关于JS中var、let和const的内容，请查阅本站往期文章或继续浏览后续相关教程。感谢大家的支持！

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

前言