var let const 详细区别

用了ES6已经有一段事件了，也看了很多文档，以前觉得不用写一个文档总结，但是经过一段时间的接触以后，认为自己还是有必要去吧他们的区别详详细细的总结一下

块级作用域

白话一点就是在{}中就是一个块级作用域，那么这个块级作用域有什么作用呢？

第一种场景，内层变量可能会覆盖外层变量

var tmp = new Date();

function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';
  }
}

f(); // undefined

上面代码的原意是，if代码块的外部使用外层的tmp变量，内部使用内层的tmp变量。但是，函数f执行后，输出结果为undefined，原因在于变量提升(虽然这里if为false但是还是会变量提升，只是不会执行tmp = 'hello world';)，导致内层的tmp变量覆盖了外层的tmp变量。

第二种场景，用来计数的循环变量泄露为全局变量

var s = 'hello';

for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}

console.log(i); // 5

上面代码中，变量i只用来控制循环，但是循环结束后，它并没有消失，泄露成了全局变量。

let和const实际上为 JavaScript 新增了块级作用域

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

let和const只在各自块级作用域中有效

在不同的作用域下,会有不同的各自的变量,常量

let n = 5;
function f1() {
  let n = 50;
  {
    let n = 10
  }
  console.log(n); //50
}
f1();
console.log(n); //5

如果是用var声明的化 就会有不一样的打印值

关于这个不同大表现值还有一个例子很有表现力-----for()循环

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

这里的答案为什么会是10，为什么不是6，因为当我们执行a[6]()这个函数的时候因为ES5中没有块级作用域所以他会在a[6]()这个函数作用域去找i的值，但是没有只可以去找全局了，那么这个时候全局中的i等于10，所以答案为10

但是如果我们用ES6 的let 来声明变量那么因为let会为js新增块级作用域，所以每一给for循环出来的{}中都有他们自己定义出来的i就不用去找全局的了

let a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}

    .
    .
当i=1的时候
{
  let i= 1
  a[1] = function(){
    console.log(1);
   }
 }
    .
    .
    .

就是上面这样一个表现的代码形式，也就是说循环体内部是一个单独的子作用域

let 和 const 不存在变量提升 但是却有暂时性死区(这个要注意)

只要块级作用域内存在let,const命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响，切不会提升

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

这里报错是因为在这个块级作用域中有声明tmp的这个举动但是赋值却在声明的下面所以报错，也就是说在一个块级作用域中，只要声明了某一个变量，这个变量补单不会提升，并且这么块级作用域就相当于是这个变量的暂时性死区，不会去向上一个层级去找变量，也就是说一定在块级作用域下要先声明在赋值，(这个也是一个必须要有的品质)

暂时性死区的特别案例

y=4
function bar(x = y, y = 2) {
  return [x, y];
}

bar(); // 报错

因为x=y的过程中y还没被定义函数中的形参的定义是定义在函数内部的，不是函数外，所以这里外部的y=4是没效果的

// 不报错
var x = x;

// 报错
let x = x;
// ReferenceError: x is not defined

这里x没定义就被赋值了，其实也是同一个道理

let不允许重复声明，但可以改变值，const是定义一个常量那么连值都不可以去改变

但是这里const值不可以变有一份地方需要注意就是当const定义的是一个指针(对象名，引用类型)的时候，那么是指针指向的地址不变就可以了，地址里的东西变了是关系的？为什么呢？我们假设一下：我们用const定义了一把钥匙，我们只要求钥匙不变我们是管不了钥匙他可以开的那个们不管他变不变，反正我们定义的是那个钥匙对吧。

function func() {
  let a = 10;
  var a = 1;
}

// 报错
function func() {
  let a = 10;
  let a = 1;
}

function func(arg) {
  let arg;
}
func() // 报错

function func(arg) {
  {
    let arg;
  }
}
func() // 不报错

块级作用域与函数声明

在块级作用域中不要用函数声明，最后是要用函数表达式，为什么呢？ 马上就知道了

ES5 规定，函数只能在顶层作用域和函数作用域之中声明，不能在块级作用域声明。但是，浏览器没有遵守这个规定，为了兼容以前的旧代码，还是支持在块级作用域之中声明函数，因此上面两种情况实际都能运行，不会报错。

在ES5中：

function f() { console.log('I am outside!'); }

(function () {
  if (false) {
    // 重复声明一次函数f
    function f() { console.log('I am inside!'); }
  }

  f();
}());

上面代码在 ES5 中运行，会得到“I am inside!”，因为在if内声明的函数f会被提升到函数头部，实际运行的代码如下。

// ES5 环境
function f() { console.log('I am outside!'); }

(function () {
  function f() { console.log('I am inside!'); }
  if (false) {
  }
  f();
}());

在ES6中：

ES6 就完全不一样了，理论上会得到“I am outside!”。因为块级作用域内声明的函数类似于let，对作用域之外没有影响。但是，如果你真的在 ES6 浏览器中运行一下上面的代码，是会报错的，这是为什么呢？

原来，如果改变了块级作用域内声明的函数的处理规则，显然会对老代码产生很大影响。为了减轻因此产生的不兼容问题，ES6 在附录 B里面规定，浏览器的实现可以不遵守上面的规定，有自己的行为方式。

• 允许在块级作用域内声明函数。
• 函数声明类似于var，即会提升到全局作用域或函数作用域的头部，赋值为undefined
• 同时，函数声明还会提升到所在的块级作用域的头部。(整个函数)

上面的例子实际运行的代码如下

// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }
(function () {
  var f = undefined;
  if (false) {
    function f() { console.log('I am inside!'); }
  }

  f();
}());
// Uncaught TypeError: f is not a function

 大家可以试一试，讲道理确实麻烦所以我以后应该是不会在块级作用域中使用函数声明了，用函数表达式

/ 块级作用域内部的函数声明语句，建议不要使用
{
  let a = 'secret';
  function f() {
    return a;
  }
}

// 块级作用域内部，优先使用函数表达式
{
  let a = 'secret';
  let f = function () {
    return a;
  };
}

 ES6声明变量的六种方法

 var function  ES6:let const import class

顶层对象的属性