let const 与var的区别是什么

# 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开发准则

1. 默认使用const
   适用于所有不需要重新赋值的变量

   const PI = 3.14; const config = { apiUrl: '...' }; 

2. 需要重新赋值时使用let

   let counter = 0; counter++; 

3. 避免使用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. 添加面试常见问题解析