JS变量声明：const、let、var区别详解

原创于 2025-08-19 10:23:20 发布 · 746 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

在 JavaScript 中，const、let 和 var 都是用于声明变量的关键字，但它们在作用域、变量提升、可修改性等方面有显著区别：

1. 作用域不同

var：

作用域是函数级，即只在声明它的函数内部有效，在函数外部无法访问。
如果在函数外部声明，会成为全局变量（挂载在 window 对象上）。

示例：

function test() {
  var a = 10;
  if (true) {
    var a = 20; // 同一函数内的同一变量，覆盖前面的值
    console.log(a); // 20
  }
  console.log(a); // 20（而非 10，因为作用域是整个函数）
}
test();

let 和 const：

作用域是块级（{} 包裹的区域，如 if、for、while 等代码块），在块外部无法访问。

示例：

function test() {
  let b = 10;
  if (true) {
    let b = 20; // 块级作用域内的独立变量，不影响外部
    console.log(b); // 20
  }
  console.log(b); // 10（保持原值）
}
test();

2. 变量提升（Hoisting）

var：
- 会发生变量提升，即声明会被提升到当前作用域的顶部，但赋值不会。
- 示例：
```
console.log(x); // undefined（声明被提升，赋值未提升）
var x = 10;
```
let 和 const：
- 存在暂时性死区（Temporal Dead Zone, TDZ），声明不会被提升，在声明前访问会报错。
- 示例：
```
console.log(y); // 报错：Cannot access 'y' before initialization
let y = 20;
```

3. 可修改性

var 和 let：

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

示例：

var a = 10;
a = 20; // 合法

let b = 30;
b = 40; // 合法

const：

声明的是常量，不能重新赋值（但如果是对象 / 数组，其内部属性 / 元素可以修改）。

示例：

const c = 50;
c = 60; // 报错：Assignment to constant variable

const obj = { name: 'test' };
obj.name = 'new test'; // 合法（对象本身的引用未变，仅修改内部属性）

4. 重复声明

var：
- 允许在同一作用域内重复声明同一变量，后声明的会覆盖前面的。
- 示例：
```
var a = 10;
var a = 20; // 合法，a 最终为 20
```

let 和 const：

在同一作用域内不允许重复声明同一变量，否则报错。

示例：

let b = 30;
let b = 40; // 报错：Identifier 'b' has already been declared

const c = 50;
const c = 60; // 报错：Identifier 'c' has already been declared

总结建议

特性	`var`	`let`	`const`
作用域	函数级	块级	块级
变量提升	有（声明提升）	无（暂时性死区）	无（暂时性死区）
可重新赋值	是	是	否（引用类型内部可改）
重复声明	允许	不允许	不允许