深入理解let、const和var

在ES6以前，使用的是var进行变量声明，在此之后，变量申明的方式多了let和const。

var声明的变量存在执行上下文的变量环境 中，该环境在整个函数作用域中都是能够访问的。

let和const声明的变量存在执行上下文的词法环境 中，该环境在当前的块级作用域中才能被访问。

js 复制代码

{
  var a = 1;
  let b = 2;
  const c = 3;
  console.log(c); // 3
}
console.log(a); // 1
console.log(b); // ❌ 引用错误
console.log(c); // ❌ 引用错误

var声明的变量在引用之后，是能够访问到变量的，只是这时候的变量获取到的是undefined，这样的情况就是变量提升。

let和const声明的变量在引用之后，是会报错的。虽然 let 和const也被提升，但在声明之前访问会报错，这段不可访问的时间叫 暂时性死区。

js 复制代码

console.log(a); // undefined（提升）
console.log(b); // 无法访问，暂时性死区
console.log(c); // 无法访问，暂时性死区
var a = 1;
let b = 2;
const c = 3;

var可以重复进行声明，不会有问题；

let和const在一个块级作用域下，只能进行一次声明。

js 复制代码

var x = 10;
var x = 20; // ✅ 

let y = 10;
let y = 20; // ❌

const z = 30;
const z = 40; // ❌

var和let在声明时可以不赋值，自动赋值为null;

const在声明时必须进行赋值，否则会报错。

js 复制代码

var a;  // 相当于 var a = null;
let b;  // 相当于 let b = null;
const c; // ❌ 报错。

var和let声明的变量值是可以重新赋值的，值是可变的；

const声明的变量值是不可以修改 的，如果赋值的是对象，对象内的属性和值是可以改变的。类似于常量。

js 复制代码

var b = 1;
b = 2; // ✅ 可重新赋值

let a = 1;
a = 2; // ✅ 可重新赋值

const obj = { name: 'ErMao' };
obj.name = 'Da'; // ✅ 可修改对象内容
obj = {};        // ❌ 不可重新赋值

var在全局作用域下声明的变量会挂在window对象上；

let和const声明的变量不会挂在window对象上；

js 复制代码

var a = 1;
let b = 2;
const c = 3;
console.log(window.a) // 1
console.log(window.b) // undefined
console.log(window.c) // undefined

在ES6以前，声明变量的时候会使用var，会出现一些问题包括变量提升 、无法形成词法作用域 以及随意修改和声明 。出现let和const后，让JS的代码更加安全、更加简洁和更加规范。

常见的差别有：作用域、变量提升、重复声明、声明初始化、值的可变性、是否会挂载在window对象上。

在理解这一块知识前，最好先理解JS中的执行上下文 以及作用域 的相关知识，了解词法环境 和变量环境在执行上下文中的作用。

‍