var与let和const

ES6新增了两个与声明有关的命令：let和const。

var与let、const的区别

1. let和const声明的变量不会成为window的属性；var声明会成为window的属性

   var a = 10;
   let b = 20;
   const c = 30;
   console.log(a,b,c);   //10,20,30
   console.log(window.a, window.b, window.c);   //10,undefined,undefined

2. let和const声明不允许在相同作用域内重复声明同一个变量，声明后不可以再修改；var可以重复声明，其实也就是覆盖前面的值。不过const如果声明的是复合类型的数据，那么就可以修改其属性。

   var a = 10;
   console.log(a);   //10
   var a = 1;
   console.log(a);   //1
   
   let b = 20;
   console.log(b);   //20
   let b = 2;
   console.log(b);   //Uncaught SyntaxError: Identifier 'b' has already been declared（标识符b已经被声明了）
   
   const c = {
       name:'CD'
   };
   console.log(c);   //{ name:"CD" }
   c.name = 'AB';   //但是如果此处用const去声明就会得到和下面一样的结果
   console.log(c);   //{ name:"AB" }
   const c = {
       name:"CD"
   };
   console.log(c);   //Uncaught SyntaxError: Identifier 'c' has already been declared
   因为a的值并没有改变，依然指向刚开始赋值的那个对象，
       // 并为重新赋值，如果将a重新赋值，就会报错了。大家可以试试。
       // 用const定义的常量只要是引用类型数据，改变这个引用类型数据的结构或属性，都是允许的。
       // 引用类型包括哪些呢？数组和对象。

3. let和var声明可以先声明再赋值，一般用于声明变量；const一旦声明必须初始化，不能使用null占位，用来专门声明一个常量

   var a;
   console.log(a);  //undefined
   
   let b;
   console.log(b);  //undefined
   
   const c;
   console.log(c);   //Uncaught SyntaxError: Missing initializer in const declaration

4. let和const声明没有变量提升；var有变量提升

   console.log(a); //undefined
   var a = 10;
   
   console.log(b); //ReferenceError
   let b = 20;

5. let和const声明有块级作用域，只在其所在代码块内有效；var声明没有块级作用域，在其所在整个封闭函数内有效

   //var： 5 5 5 5 5
   for(var i=0; i<5; i++){
       setTimeout(function(){
           console.log(i);
       }, i*100);
   }
   
   //let： 0 1 2 3 4
   for(let i=0; i<5; i++){
       setTimeout(function(){
           console.log(i);
       },i*100);
   }
   
   //var：0 1 2 3 4
   for(var i=0; i<5; i++){
       (function(){
           var j=i;
           setTimeout(function(){
               console.log(j);
           },i*100);
       })
   }
   
   //const使用for循环
   for(const i of [0,1,2,3,4]){   //每次i都重新绑定
       console.log(i);   //0 1 2 3 4
   }

   var声明时，浏览器引擎先执行同步任务，再执行异步任务，所以for循环执行完成后才会执行setTimout()。全局只有一个i变量，每次循环i的值都会被改变，此时i由最开始定义的i=0被i=5覆盖，在当前作用域中，传入setTimeout()的i均为5。执行结果为5 5 5 5 5。

   let声明时，浏览器同样先执行同步任务，再执行异步任务。 但let声明形成块级作用域，当前的i本轮循环有效，所以每次循环的i都是一个新的变量，只在它所在的当前作用域有效。并且每次循环结束后i都会被JS引擎标记以便于下次循环的计算基础。每次放入执行队列的setTimeout()只能取得当前块作用域中的i，分别是0、1、2、3、4，执行结果为0 1 2 3 4。

6. let和const声明会出现暂时性死区；var不会出现

   var s = "out";
   if(true){
       console.log(s);   //报错：ReferenceError
       let s = "in";   //s绑定到该块级作用域，不再受外部影响
   }

   ES6明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，成为“暂时性死区”（temporal dead zone，简称 TDZ）。 

   if(true){
       //TDZ开始
       n = 0;   //报错：ReferenceError
       console.log(typeof n);   //报错：ReferenceError
       let n;
       //TDZ结束
   
       console.log(n);   //undefined
       n=10;
       console.log(n);   //10
   }
   

   存在于死区的变量时禁止被访问的。由此可以看出，let声明其实存在变量提升，但是由于存在于死区而无法在声明前访问到该变量。故而称其不可以提升变量 。 

看到两段很有意思的代码

• 很隐蔽的一个死区

  function bar(x = y, y = 2){
    return [x, y];
  }
  bar();  //报错
  
  //因为参数x的默认值等于另一个参数y，而此时y还没有声明，属于死区，
  //如果y的默认值为x，就不会报错，例如：
  
  function bar(x = 2, y = x){
    return [x, y];
  }
  bar();  //[2, 2]
  

• 行为怪异的let

  var a = 100;
  if(1){
      a = 10;
      //在当前块作用域中存在a使用let/const声明的情况下，给a赋值10时，只会在当前作用域找变量a，而此时还未到声明
      console.log(a);   // Uncaught ReferenceError: Cannot access 'a' before initialization
  
      let a = 1;
  }