ES6中块级作用域及变量声明let

1、先看一道题目

let a = 10,
    b = 10;
let fn = function () {
    console.log(a,b);   //=>Uncaught ReferenceError: a is not defined
    let a = b = 20;
    /*
     * let a=20;
     * b=20; //=>把全局中的 b=20
     */
    console.log(a, b);
};
fn();
console.log(a, b);

在报错的位置，自己看了好久也没有理解，为什么console.log(a,b);在输出的时候，a会报错，但是b却不会？
最后在看了块作用域、let变量声明后，茅塞顿开。

---

整个程序都是以let来声明的，遵循ES6语法规则。
主要的问题是在这里面。。

let fn = function () {
    console.log(a,b);   //=>Uncaught ReferenceError: a is not defined
    let a = b = 20;
    /*
     * 相当于
     * let a=20;  //【关键】
     * b=20;     //=>把全局中的 b=20
     */
    console.log(a, b);
};

在以函数fn形成的封闭块级作用域中，遵循let的语法规范，此时没有变量提升。但是在执行整个函数之前会首先有语法检测。

在此块级作用域中，a是以let a=20来定义的，因此要使用a，必须在定义之后才可以使用，在定义之前的使用都会报错：a is not defined。

而b是以b=20来定义的，其语法规范是遵循ES5的，相当于window.b=20,因此在定义之前、定义后调用都可以。

2、再看个题目

var a = 12;
if (true) {
    console.log(a);//=>Uncaught ReferenceError: a is not defined
    let a = 13;  //
}

可以看到，此时也会报错。原因：

基于LET创建变量，会把大部分{}当做一个私有的块级作用域（类似于函数的私有作用域），在这里重新检测语法规范，看一下是否是基于新语法创建的变量，如果是则按照新语法规范来解析。

这个区域，也叫做暂时性死区。

3、最后看个题目

console.log(a);//=>Uncaught ReferenceError: a is not defined
console.log(typeof a);//=>"undefined" 

第一句：这指定的报错啊，无论是哪种语法规范，a在使用前后都没有声明过啊！！必须的undefined。
第二句：在当前浏览器渲染机制下（同时支持ES5/6），基于typeOf等逻辑运算符检测一个未被声明过的变量时，不会报错，会返回undefined。

console.log(a);//=>Uncaught ReferenceError: a is not defined
console.log(typeof a);//=>Uncaught ReferenceError: a is not defined
let a;  //

再看：
第一句：尽管在后面有let a 来声明，但是let的语法规范是先声明、后使用。所以undefined。
第二句：当前变量是基于ES6语法处理，在没有声明这个变量的时候，使用TYPEOF检测会直接报错，不会是UNDEFINED，解决了原有的JS的死区问题

参考