let、const 和 var 的区别

let、const 是 ES6 新增的两个声明变量的命令，用法类似于于 var。

let

let 实际上是 ES6 新增的块级作用域，和var相比，有以下特征

不存在变量提升

var 声明的变量会提升到当前作用域的最顶端，注意只提升声明，不提升赋值。

console.log(str); // undefined
var str = "javascript";
等价于;
var str;
console.log(str);
str = "javascript";

let 不存在变量提升

console.log(str); // ReferenceError
let str = "javascript";

暂时性死区

只要是 let 声明的变量会“绑定”到当前作用域，不会受外部影响，在代码块内，使用 let 命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”，总之，暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

var tmp = 123;
if (true) {
  tmp = "abc"; // ReferenceError
  let tmp;
}

不允许重复声明

let 不允许同一作用域内重复声明同一个变量，var可以重复声明。

var str;
var str; // 可以

var str;
let str; //报错

let str1；
let str1; //报错

因此，函数内部不能使用let重复声明参数

function fun(str) {
    var str = "222"
    console.log(str);
}

fun("111"); // 222


function fun(str) {
    let str = "222"
    console.log(str);
}

fun("111"); // 报错

不属于全局属性

var、function属于全局变量，是顶层对象的属性，let、const、class 不属于顶层对象属性，不可通过window.去访问

const

const 声明一个只读的常量，一旦被声明就不允许改变。

const str = "str"
str = "str" // 报错

const和let一样声明只在块级作用域有效，同样没有变量提升，和存在暂时性死区，也不可重复声明

const的本质

我们都知道，基本类型数据存在栈内存中，引用类型数据只是在栈内存存储了一个指向堆内存的指针，实际数据存放在堆内存中。 const并不是保证这个变量不可以改变，而是保证这个变量指向的占内存的值不可改变，所以使用const创建引用类型数据要小心

const arr = [];
arr.push(1) // 可以
arr = 1 // 报错

如果想将一个对象冻结的话，可以使用Object.freeze方法

const foo = Object.freeze({});
// 常规模式时，面一行不起作用；
// 严格模式时，该行会报错
foo.prop = 123;

为什么需要块级作用域

众所周知，在 ES5 当中，只有全局作用域和函数作用域。那为什么需要块级作用域呢？

• 场景一：内层同名变量会覆盖外层变量

  var str = "hello,world!";
  function fun() {
  console.log(str);
  var str = "你好，世界";
  }
  fun(); // undefined
  
  var str = "hello,world!";
  function fun() {
  console.log(str);
  let str = "你好，世界";
  }
  fun(); //  ReferenceError
  

• 场景二：循环变量泄露为全局变量

  for (var i = 0; i < 5; i++) {
  setTimeout(() => {
      console.log(i);
  }, 1000);
  }
  // 5 5 5 5 5
  for (let i = 0; i < 5; i++) {
  setTimeout(() => {
      console.log(i);
  }, 1000);
  }
  // 1 2 3 4 5
  

  在ES5，我们在通常会使用匿名立即执行函数解决这类问题

  for (var i = 0; i < 5; i++) {
      (function (i) {
          setTimeout(() => {
              console.log(i);
          }, 1000);
      })(i)
  }
  // 1 2 3 4 5