网络异常，图片无法展示
|
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可以重复定义变量，这就导致了数据的冗余和代码不可读性提升。
