深入浅出var let const的区别

在ES6出现之前JavaScript没有块级作用域的概念，这可能使得我们对js的作用域有时候无法理解。下面我们来详细的谈一谈var let const 三者的区别

首先我们看这样一个例子

  var a = 10;
     foo();              //foo是函数  函数声明会提到作用域的最顶部 所以会优先执行该函数
     console.log(a);
     function foo(){
         console.log(a);    //在foo函数的局部作用域中 变量a在预编译过程中被赋值为：undefined
         var a = 20;        //此时给局部作用域中的a赋值为20
         console.log(a);    
     }




     //输出结果：
     // undefined
     //20
     //10

一：怎样体现let 的块级作用域

 {
        var a = 100;
     }
     console.log(a);
     // 100

     {
        let b = 200;
     }
     console.log(b);
     // b is not defined

上面的例子很好的说明了var 声明的变量是没有块级作用域的，而let声明的变量有块级作用域。

let非常适合用于 for循环内部的块级作用域。JS中的for循环体比较特殊，每次执行都是一个全新的独立的块作用域，用let声明的变量传入到 for循环体的作用域后，不会发生改变，不受外界的影响。

for (var i = 0; i <10; i++) {  
        setTimeout(function() {  // 同步注册回调函数到 异步的 宏任务队列。
        console.log(i);        // 执行此代码时，同步代码for循环已经执行完成
        }, 0);
    }
    // 输出结果
    //10   共10个

for (let i = 0; i < 10; i++) { 
    setTimeout(function() {
    console.log(i);    //  i 是循环体内局部作用域，不受外界影响。
        }, 0);
    }
    // 输出结果：
    //0  1  2  3  4  5  6  7  8 9