javascript的var与let,const的区别是什么

发布时间：2022-01-04 16:22:05 作者：iii
来源：亿速云阅读：145

# JavaScript的var与let,const的区别是什么

## 引言

在JavaScript中，变量声明是编程的基础操作。ES6（ECMAScript 2015）引入了`let`和`const`关键字，为变量声明提供了新的方式，与传统的`var`相比有显著差异。本文将深入探讨这三者的区别，涵盖作用域、提升、重复声明、全局对象属性等方面，并通过代码示例进行说明。

---

## 1. 作用域差异

### 1.1 var的函数作用域
`var`声明的变量具有**函数作用域**（function scope），即在声明它的函数内部有效：
```javascript
function varExample() {
  var x = 10;
  if (true) {
    var x = 20; // 同一个变量
    console.log(x); // 20
  }
  console.log(x); // 20
}

1.2 let/const的块级作用域

let和const具有块级作用域（block scope），仅在声明它的代码块（如{}、if、for等）内有效：

function letExample() {
  let x = 10;
  if (true) {
    let x = 20; // 不同的变量
    console.log(x); // 20
  }
  console.log(x); // 10
}

2. 变量提升（Hoisting）

2.1 var的变量提升

var声明的变量会被提升到作用域顶部，但初始化不被提升：

console.log(a); // undefined
var a = 10;
// 实际执行顺序：
// var a;
// console.log(a);
// a = 10;

2.2 let/const的暂时性死区

let和const虽然也存在提升，但存在暂时性死区（Temporal Dead Zone, TDZ），在声明前访问会报错：

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

3. 重复声明

3.1 var允许重复声明

var允许在同一作用域内重复声明，后者会覆盖前者：

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

3.2 let/const禁止重复声明

let和const在同一作用域内不允许重复声明：

let d = 10;
let d = 20; // SyntaxError

4. 全局对象属性

4.1 var声明的全局变量

在全局作用域中，var声明的变量会成为window（浏览器）或global（Node.js）对象的属性：

var e = 10;
console.log(window.e); // 10（浏览器环境）

4.2 let/const声明的全局变量

let和const声明的全局变量不会成为全局对象的属性：

let f = 10;
console.log(window.f); // undefined

5. const的特殊性

5.1 必须初始化

const声明时必须赋值，否则报错：

const g; // SyntaxError

5.2 不可重新赋值

const声明的变量（基本类型）不可重新赋值，但对象/数组的属性可以修改：

const h = { name: "Alice" };
h.name = "Bob"; // 合法
h = {}; // TypeError

6. 实际应用场景对比

6.1 循环中的变量捕获

var在循环中会导致变量共享问题：

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // 输出3次3
}

let为每次迭代创建新的绑定：

for (let j = 0; j < 3; j++) {
  setTimeout(() => console.log(j), 100); // 输出0,1,2
}

6.2 常量声明

使用const声明不可变的常量：

const PI = 3.14159;
const API_URL = "https://api.example.com";

6.3 模块开发

现代JavaScript模块中推荐使用let和const，避免var的意外行为。

7. 迁移建议

7.1 停止使用var

所有新项目应优先使用let和const
使用ESLint规则"no-var": "error"强制规范

7.2 使用策略

默认使用const
需要重新赋值时使用let
避免使用var

8. 常见面试题解析

问题1：以下代码输出什么？

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}

答案：输出3,3,3（因为var使变量i在循环中共享）

问题2：如何修复上述问题？

方案：

// 方案1：使用let
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}

// 方案2：使用闭包
for (var i = 0; i < 3; i++) {
  (function(j) {
    setTimeout(() => console.log(j), 0);
  })(i);
}

9. 性能考量

9.1 理论差异

let/const在块级作用域结束时可能更快被垃圾回收
现代JavaScript引擎已优化var的性能差异

9.2 实际影响

在大多数场景下性能差异可以忽略，应优先考虑代码可维护性。

10. 历史背景

10.1 var的设计缺陷

早期JavaScript只有函数作用域
变量提升和重复声明容易导致bug

10.2 ES6的改进

let/const引入块级作用域
更符合其他编程语言的惯例

结论

特性	var	let	const
作用域	函数作用域	块级作用域	块级作用域
提升	是（值为undefined）	是（TDZ）	是（TDZ）
重复声明	允许	禁止	禁止
全局属性	是	否	否
重新赋值	允许	允许	禁止
初始化要求	可选	可选	必需

现代JavaScript开发中应优先使用const和let，var仅用于维护旧代码。理解这些差异有助于编写更可预测、更健壮的代码。

通过全面采用let和const，开发者可以避免许多传统JavaScript中的常见陷阱，使代码更符合现代编程实践。 “`

（全文约2050字，Markdown格式）