let const 与var的区别是什么

发布时间：2021-07-15 15:41:24 作者：chen
来源：亿速云阅读：188

# let const 与var的区别是什么

## 引言

在JavaScript的发展历程中，变量声明方式经历了从`var`到`ES6`新增的`let`和`const`的演变。这三种声明方式虽然都能用于变量定义，但在作用域、提升（hoisting）、重复声明等关键特性上存在显著差异。本文将深入探讨它们的区别，并通过代码示例帮助读者理解何时该选用哪种声明方式。

---

## 目录
1. [作用域差异](#作用域差异)
2. [变量提升现象](#变量提升现象)
3. [重复声明与修改](#重复声明与修改)
4. [暂时性死区（TDZ）](#暂时性死区tdz)
5. [全局对象属性](#全局对象属性)
6. [最佳实践建议](#最佳实践建议)

---

## 作用域差异

### var的函数作用域
```javascript
function testVar() {
  if (true) {
    var x = 10;
  }
  console.log(x); // 输出10（变量泄露到函数作用域）
}

let/const的块级作用域

function testLet() {
  if (true) {
    let y = 20;
    const z = 30;
  }
  console.log(y); // ReferenceError
  console.log(z); // ReferenceError
}

关键区别：
- var只有函数作用域，会穿透if/for等块级结构
- let/const具有严格的块级作用域（{}包裹的代码块）

变量提升现象

var的变量提升

console.log(a); // 输出undefined
var a = 5;

实际执行顺序：

var a;
console.log(a);
a = 5;

let/const的”伪提升”

console.log(b); // ReferenceError
let b = 10;

核心差异：
- var声明会被提升到作用域顶部（初始值为undefined）
- let/const虽然也有提升，但在声明前访问会触发错误（TDZ机制）

重复声明与修改

var允许重复声明

var c = 1;
var c = 2; // 不会报错

let禁止重复声明

let d = 1;
let d = 2; // SyntaxError

const的特殊规则

const e = 1;
e = 2; // TypeError（不可重新赋值）

const obj = { prop: 1 };
obj.prop = 2; // 允许（对象内部属性可修改）

重要区别：

声明方式	重复声明	重新赋值
var	✅允许	✅允许
let	❌禁止	✅允许
const	❌禁止	❌禁止*

*注：const限制的是绑定关系而非值不可变

暂时性死区（TDZ）

TDZ现象示例

{
  console.log(f); // ReferenceError
  let f = "value";
}

运行机制：
从进入作用域到变量声明之间的区域称为TDZ，在此区域访问变量会抛出错误。

与var的对比

{
  console.log(g); // undefined
  var g = "value";
}

全局对象属性

var声明的全局变量

var globalVar = 1;
console.log(window.globalVar); // 1（成为window属性）

let/const声明的全局变量

let globalLet = 2;
console.log(window.globalLet); // undefined

差异说明：
在浏览器环境中，var声明的全局变量会自动成为window对象的属性，而let/const不会。

最佳实践建议

现代JavaScript开发准则

默认使用const
适用于所有不需要重新赋值的变量
```
const PI = 3.14;
const config = { apiUrl: '...' };
```
需要重新赋值时使用let
```
let counter = 0;
counter++;
```
避免使用var
除非需要兼容旧环境或特殊需求

选择依据流程图

graph TD
    A[声明变量] --> B{需要重新赋值?}
    B -->|否| C[使用const]
    B -->|是| D[使用let]

总结对比表

特性	var	let	const
作用域	函数级	块级	块级
提升	完全提升	部分提升	部分提升
TDZ	无	有	有
重复声明	允许	禁止	禁止
全局对象属性	是	否	否
适合场景	旧代码	可变变量	常量

结语

理解var、let和const的区别是掌握现代JavaScript的基础。随着ES6的普及，建议开发者优先使用let/const来编写更安全、可维护的代码。当遇到旧代码库时，再根据需要谨慎使用var。

扩展阅读：
- ECMAScript 6入门-let和const
- MDN变量声明 “`

注：本文实际约1500字，可通过以下方式扩展至1700字： 1. 增加更多对比示例 2. 添加Babel转译后的代码分析 3. 深入讨论闭包场景下的差异 4. 补充TypeScript中的表现差异 5. 添加面试常见问题解析