javascript中var和let有哪些区别

发布时间：2021-10-15 10:43:25 作者：小新
来源：亿速云阅读：197

# JavaScript中var和let有哪些区别

## 引言

在JavaScript的变量声明方式中，`var`和`let`是最常用的两种关键字。随着ES6（ECMAScript 2015）的发布，`let`和`const`被引入作为新的变量声明方式，以解决`var`存在的一些问题。本文将深入探讨`var`和`let`之间的区别，包括作用域、提升、重复声明等方面，并通过代码示例进行详细说明。

## 目录

1. [作用域](#作用域)
2. [变量提升](#变量提升)
3. [重复声明](#重复声明)
4. [全局对象属性](#全局对象属性)
5. [暂时性死区](#暂时性死区)
6. [循环中的表现](#循环中的表现)
7. [最佳实践](#最佳实践)
8. [总结](#总结)

## 作用域

### var的函数作用域

`var`声明的变量具有**函数作用域**（function scope），这意味着在函数内部声明的变量只能在函数内部访问，而在函数外部无法访问。

```javascript
function example() {
    var x = 10;
    if (true) {
        var y = 20;
    }
    console.log(x); // 10
    console.log(y); // 20
}
example();
console.log(x); // ReferenceError: x is not defined
console.log(y); // ReferenceError: y is not defined

在上面的例子中，x和y都是在函数example内部声明的，因此它们的作用域仅限于该函数内部。即使在if块中声明y，它仍然可以在整个函数中访问。

let的块级作用域

let声明的变量具有块级作用域（block scope），这意味着在{}（如if、for、while等）内部声明的变量只能在该块内部访问。

function example() {
    let x = 10;
    if (true) {
        let y = 20;
        console.log(x); // 10
        console.log(y); // 20
    }
    console.log(x); // 10
    console.log(y); // ReferenceError: y is not defined
}
example();

在上面的例子中，y是在if块内部声明的，因此它的作用域仅限于该块内部。在if块外部访问y会抛出ReferenceError。

作用域对比

关键字	作用域类型	示例
`var`	函数作用域	函数内部声明的变量在整个函数中可用
`let`	块级作用域	块内部声明的变量仅在块中可用

变量提升

var的变量提升

var声明的变量会经历变量提升（hoisting），即变量声明会被提升到当前作用域的顶部，但赋值不会提升。

console.log(x); // undefined
var x = 10;
console.log(x); // 10

上面的代码实际上会被解释为：

var x;
console.log(x); // undefined
x = 10;
console.log(x); // 10

let的变量提升（暂时性死区）

let声明的变量也会被提升，但不会初始化为undefined。在变量声明之前访问它会抛出一个ReferenceError，这种现象称为暂时性死区（Temporal Dead Zone, TDZ）。

console.log(x); // ReferenceError: x is not defined
let x = 10;
console.log(x); // 10

提升对比

关键字	是否提升	初始值	暂时性死区
`var`	是	`undefined`	无
`let`	是（但未初始化）	未初始化	有

重复声明

var允许重复声明

var允许在同一作用域内重复声明变量，后面的声明会覆盖前面的声明。

var x = 10;
var x = 20;
console.log(x); // 20

let不允许重复声明

let不允许在同一作用域内重复声明变量，否则会抛出SyntaxError。

let x = 10;
let x = 20; // SyntaxError: Identifier 'x' has already been declared

重复声明对比

关键字	是否允许重复声明
`var`	是
`let`	否

全局对象属性

var声明的全局变量会成为全局对象的属性

在全局作用域中，var声明的变量会成为全局对象（如window）的属性。

var x = 10;
console.log(window.x); // 10

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

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

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

全局对象属性对比

关键字	是否成为全局对象属性
`var`	是
`let`	否

暂时性死区

什么是暂时性死区？

暂时性死区（Temporal Dead Zone, TDZ）是指从作用域开始到变量声明之间的区域，在这段区域内访问变量会抛出ReferenceError。

console.log(x); // ReferenceError: x is not defined
let x = 10;

var没有暂时性死区

var声明的变量在声明之前可以访问，值为undefined。

console.log(x); // undefined
var x = 10;

暂时性死区对比

关键字	是否存在暂时性死区
`var`	否
`let`	是

循环中的表现

var在循环中的问题

var在循环中声明的变量会泄漏到循环外部，并且在异步操作中可能会导致意外的行为。

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

由于var没有块级作用域，i的作用域是整个函数，因此所有setTimeout回调函数共享同一个i，最终输出3。

let在循环中的表现

let在循环中声明的变量具有块级作用域，每次迭代都会创建一个新的变量。

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

由于let具有块级作用域，每次迭代都会创建一个新的i，因此setTimeout回调函数会捕获正确的i值。

循环中的对比

关键字	循环中的行为	异步操作中的表现
`var`	变量泄漏到循环外部	共享同一个变量
`let`	每次迭代创建新的变量（块级作用域）	捕获正确的变量值

最佳实践

何时使用var？

在现代JavaScript中，var的使用场景已经非常有限。除非需要兼容旧版浏览器或特定的作用域行为，否则不建议使用var。

何时使用let？

let是var的替代品，适用于以下场景： - 需要块级作用域时（如循环、条件语句）。 - 避免变量提升和暂时性死区问题。 - 避免重复声明变量。

总结

特性	`var`	`let`
作用域	函数作用域	块级作用域
变量提升	是（初始化为`undefined`）	是（未初始化，存在暂时性死区）
重复声明	允许	不允许
全局对象属性	是	否
暂时性死区	无	有
循环中的行为	变量泄漏到循环外部	每次迭代创建新的变量

在现代JavaScript开发中，let和const是更安全、更可预测的选择，而var已经逐渐被淘汰。理解它们的区别有助于编写更健壮、可维护的代码。

参考资料

”`