Js中的var、let、const有什么区别？

1、前言

在前面的学习中，我们用到过var、let、const去定义变量，那么它们定义的变量之间到底有什么区别呢？今天我们就一起来看看。

2、快速开始

2.1、关于作用域

首先，var定义的变量是没有作用域的；但let和const定义的变量只能在当前块中使用。

{var a=1,b=2} // 块，块中var定义的变量可以在其他块和块外使用

function adds(a,b){
    return a+b
}

console.log(adds(a,b))
// 输出：3

{let a=1,b=2} // 块，块中let定义的变量只能在当前块中使用

function adds(arg1,arg2){
    return arg1+arg2
}

console.log(adds(a,b))
// 输出：ReferenceError: a is not defined

{const a=1,b=2} // 块，块中const定义的变量只能在当前块中使用

function adds(arg1,arg2){
    return arg1+arg2
}

console.log(adds(a,b))
// 输出：ReferenceError: a is not defined

2.2、关于是否可以重复声明的

var声明的变量是可以重复声明的，新的值会覆盖掉旧的值。但是let和const声明的变量是不能重复声明的。

var a=0,b=1
var a=1

console.log(a+b)
// 输出：2

let a=0,b=1
let a=1

console.log(a+b)
// 输出：SyntaxError: Identifier 'a' has already been declared

const a=0,b=1
const a=1

console.log(a+b)
// 输出：SyntaxError: Identifier 'a' has already been declared

2.3、是否可以变量提升

var声明的变量是可以变量提升的，但是let和const声明的变量是不能变量提升的。

变量提升就是先用变量后声明变量，变量提升的原理就是：Js在运行前会先将var和function的对象提前进行声明和定义，所以就算声明在后也不影响代码的自上而下执行。

var b=2
a=2
console.log(a+b)
var a
// 输出：4

3、var的缺点

从上面的对我们有种错觉，var比let和const更好？并不是，你会发现实际开发中，let和const的使用频率比var高，这是为什么呢？因为var存在一些缺点，我们一起来看看。

3.1、没有作用域

这个特点在某个角度来看是优点，但也是缺点。现代化的编程思想中对变量的作用域要求比较严格，一般都是遵循小范围原则。所以var声明的变量没有作用域是其较大的缺点。

3.2、自动添加为window属性

var声明的变量会自动添加为window的属性，这在开发者看来属于对window属性的侵入，是不被提倡的，所以这也是var的缺点。

> window.Cache
< ƒ Cache() { [native code] }
> var Cache='phyger';
< undefined
> window.Cache
< 'phyger'

如上，使用var定义的变量修改了window的Cache属性，将原本的Cache方法替换成了一个字符串，这是很不好的。

3.3、提前装载

因为var定义的变量会在代码运行前提前装载，这就导致块中的同名变量会覆盖掉var定义的全局变量，这也是非常糟糕的。

var name = '大马猴';
console.log(name);
function sayhi() {
    console.log('hi-1', name) // name在这个块中生效，所以此时name还未定义
    let name = 'phyger'; // let定义的变量在代码执行到这里的时候才会装载，而且let定义的name会覆盖var定义的name
    console.log('hi-2', name)
};
sayhi()

console.log(name);

输出：

大马猴
console.log('hi-1', name)
                    ^
ReferenceError: Cannot access 'name' before initialization

3.4、重复定义

var可以重复定义变量，这就导致了数据的冗余和代码不可读性提升。

目录CONTENT