Web前端入门第 56 问：JavaScript 变量声明 var、let、const 区别

曾经var 如帝王一般统治过 JS 的变量声明，直到后来大佬们实在是忍不了 var那稀烂的声明规则，便引入了let和const这两大刀斧手，var被轻轻松松的斩落马下，如今，再难看见var的身影。

变量声明

在 JS 中，所有变量都可以用 var、let和const这三个关键字声明。

// 字符串var name1 = '前端路引';let name2 = '前端路引';const name3 = '前端路引';// 数字var age1 = 18;let age2 = 18;const age3 = 18;// 布尔值var isDev1 = true;let isDev2 = true;const isDev3 = true;// 空值var null1 = null;let null2 = null;const null3 = null;// 数组var arr1 = [1, 2, 3];let arr2 = [1, 2, 3];const arr3 = [1, 2, 3];// 对象var obj1 = {};let obj2 = {};const obj3 = {};// 函数var fn1 = function () { console.log('前端路引');}let fn2 = function () {};const fn3 = function () {};

以上的各种声明方法都是有效的，JS 语法也没强制要求必须用某个关键字声明变量。

区别

它们之间有哪些恩恩怨怨，为什么会在新的语法中引入let和const来取代var呢？

作用域

var 申明的变量，拥有函数作用域，在整个函数体内部都能访问。

let 和 const 申明的变量是块级作用域，出了代码块（就是 {}包裹的代码片段）就不可以再访问了。

function funcScope() { if (true) { var a = 1; // 函数作用域 let b = 2; // 块级作用域 const c = 3; // 块级作用域 } console.log(a); // 1（var 穿透了 if 代码块） console.log(b); // ReferenceError: b is not defined console.log(c); // ReferenceError: c is not defined}

变量申明提升

var 申明的变量，不论在哪个位置申明，都会提升到作用域顶部。

let 和 const 申明存在 暂时性死区(TDZ)，这些名词道道记不住也罢，反正您只要知道在申明之前使用会报错就对了。

console.log(x); // undefined（变量提升）var x = 10;console.log(x); // 10console.log(y); // ReferenceError: y is not defined（暂时性死区）let y = 20;

var 申明的变量，在申明之前使用会获取 undefined，这就是所谓的变量申明提升。

重复声明

var 允许同一个变量重复声明。

let 和 const 禁止重复声明。

var a = 1;var a = 2; // 允许console.log(a) // 2let b = 1;let b = 2; // SyntaxError: Identifier 'b' has already been declaredconst c = 1;const c = 2; // SyntaxError: Identifier 'c' has already been declared

let 和 const 重复声明同一个变量，会报语法错误。

全局作用域下的行为

如果在全局作用域中使用 var 申明一个变量，那么这变量会变成全局对象（如 window）的一个属性。

let 和 const 则不会绑定到全局对象。

什么是全局作用域？比如新建一个 a.js，使用 <script src="a.js"></script> 引入这个 JS 文件到 html 页面中，那么这个 JS 文件最外层就称之为全局作用域。

新建一个 test.html，引入 a.js：

<script src="a.js"></script>

新建一个 a.js：

// 全局作用域var globalVar = 1;console.log(window.globalVar); // 1let globalLet = 2;console.log(window.globalLet); // undefinedfunction test () { // 函数作用域};{ // 块级作用域}

可变性

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

const 声明的是常量，必须初始化且不可重新赋值（但对象/数组的内容可修改）。

var str = '前端路引';str = 'web3dev'; // 允许修改变量let num = 1;num = 2; // 允许修改变量const PI = 3.14;PI = 3; // TypeError: Assignment to constant variable.（不可重新赋值）const obj = { a: 1 };obj.a = 2; // 允许（修改属性）obj = {}; // TypeError: Assignment to constant variable.（不可重新赋值）

为什么 const 申明的数组和对象可以修改？

这就涉及到引用这个概念了，可以理解为数组和对象 就像现实中的房子。const 申明就像给房子打上了标签贴，拥有了这个房子的使用权，但这房子不止 const 一个拥有者，房子的主人还能对房子进行室内装修改变。const 的标签贴只能使用一次，要想把这标签再贴在另一座房子，那么就行不通了！！

循环

var 申明的变量会泄露到循环体外部。

let 仅作用于循环体内部。

for (var i = 0; i < 3; i++) {}console.log(i); // 3for (let j = 0; j < 3; j++) {}console.log(j); // ReferenceError: j is not defined

let 解决异步回调问题：

// var 的问题for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i)); // 输出 3, 3, 3}// let 的解决方案for (let j = 0; j < 3; j++) { setTimeout(() => console.log(j)); // 输出 0, 1, 2}

写在最后

最佳实践推荐：所有变量声明优先考虑使用const，如果确定变量需要修改再使用let。

果您的代码确实需要兼容 2017 年之前的浏览器，那么使用 var吧，别考虑const和let了。当然也可以使用babel等编译器，将const和let转换成var兼容低版本浏览器。