var、let、const 的区别

var、let、const 的区别

1、var 声明的变量会挂载在 window 对象上，而 let 和 const 声明的变量不会。

举例：

var a = '我是a';
let b = '我是b';
const c = '我是c';

console.log(a); // 我是a
console.log(window.a); // 我是a

console.log(b); // 我是b
console.log(window.b); // undefined

console.log(c); // 我是c
console.log(window.c); // undefined

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JKeYu4TO-1636275123457)(C:\Users\cxl\AppData\Roaming\Typora\typora-user-images\image-20211107150335175.png)]

var 的这一特性，会造成 window 全局变量的污染。举例如下：

console.log(window.innerHeight); // 打印原有的高度

var innerHeight = 100;
console.log(window.innerHeight); // 打印重新赋值的100并且以后打印的都是这个值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-luFi2Zzl-1636275123459)(C:\Users\cxl\AppData\Roaming\Typora\typora-user-images\image-20211107151720362.png)]

在不改变window.innerHeight原来的情况下打印出来的就是页面的高度，像上面的代码中，已经把原来的innerHeight属性的数据重置了所以再次打印时就会显示重新复制的值。因为var声明的变量会覆盖 window 自带的 innerHeight 属性，而let和const就不会有这种的特性。

console.log(window.innerHeight); // 打印原有的高度

let innerHeight = 100;
console.log(window.innerHeight); // 打印原有的高度

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uFLo4sIo-1636275123462)(C:\Users\cxl\AppData\Roaming\Typora\typora-user-images\image-20211107151754328.png)]

2、变量提升

• var 声明的变量存在变量提升，let 和 const 声明的变量不存在变量提升。

举例：

console.log(a); // Uncaught ReferenceError: a is not defined

使用一个从来都没有的声明的变量 会抛出错误说明a是没有定义的

console.log(a); // 打印结果：undefined
var a = '我是a';

在这里使用var声明了变量，但是在说明变量之前使用了变量，这个时候就不会抛出错误了。因为var存在变量提升，会把声明隐式提升到作用域的顶部，但不带上赋值。

console.log(b); 
// Uncaught ReferenceError: Cannot access 'b' before initialization
let b = '我是b';

console.log(c); 
// Uncaught ReferenceError: Cannot access 'c' before initialization
const c = '我是c';

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M3en2wtf-1636275123463)(C:\Users\cxl\AppData\Roaming\Typora\typora-user-images\image-20211107153457345.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fr4oD4RU-1636275123466)(C:\Users\cxl\AppData\Roaming\Typora\typora-user-images\image-20211107153520018.png)]

let和const声明的变量不存在变量提升，所以在他们声明变量之前使用这个变量就会抛出错误。

3、作用域

• var 声明不存在块级作用域，let 和 const 声明存在块级作用域

举例：

{
    var a = '我是a';
    let b = '我是b';
    const c = '我是c';
}

console.log(a); // 我是a
console.log(b); // 报错：Uncaught ReferenceError: b is not defined ==> 找不到b这个变量
console.log(c); // 报错：Uncaught ReferenceError: c is not defined ==> 找不到c这个变量

报错是因为找不到 b 和 c 这两个变量。

简单来说就是var声明的是全局变量，而let和const声明的是局部变量，就只能是在自身使用，不能提供超出自身范围的情况下使用。

4、同一作用域下，var 可以重复声明变量，let 和 const 不能重复声明变量

var a = '我是a';
var a = 'qianguyihao';
console.log(a); // qianguyihao

let b = '我是b';
let b = 'qianguyihao';
console.log(b); // Uncaught SyntaxError: Identifier 'b' has already been declared

const c = '我是c';
const c = 'qianguyihao';
console.log(c); // Uncaught SyntaxError: Identifier 'c' has already been declared

var重复声明变量，其实可以理解为重新赋值，把原来的数据给覆盖了，这样的情况下可能会造成代码混乱，可能会把之前下的代码给覆盖，导致错乱。使用 let/const 声明的变量，不会造成全局污染。

6、const特性

• 一旦声明必须赋值
• 声明后不能再修改
  • 如果用 const 声明基本数据类型，则无法被修改；
  • 如果用 const 声明引用数据类型（即“对象”），这里的“无法被修改”指的是不能改变内存地址的引用；但对象里的内容是可以被修改的。
  • 因为 变量名 是保存在栈内存中的，它代表的是对象的引用地址，它是基本数据类型，无法被修改。但是它里面的内容是保存在堆内存中的，它是引用数据类型，可以被修改。

const a;
console.log(a); // 报错：Uncaught SyntaxError: Missing initializer in const declaration

总结

基于上面的种种区别，我们可以知道：var 声明的变量，很容易造成全局污染。以后我们尽量使用 let 和 const 声明变量吧。

仅供参考