不仅是块级做用域，你不知道的let和const

ES6新增了两个重要的关键字let和const，相信你们都不陌生，可是包括我在内，在系统学习ES6以前也只使用到了【不存在变量提高】这个特性。

• let声明一个块级做用域的本地变量
• const语句声明一个块级做用域的本地常量，不能够从新赋值

支持块级做用域

var定义的变量会提高到整个函数做用域内，let/const则支持块级做用域。

块级做用域: 由 {}包裹的做用域（函数那种{}不算）

来看一个var的例子:

{
  var a = 1;
}
console.log(a);

此时输出1，由于var没有块级做用域。

来看一个let的例子(const效果同样):

{
  let a = 1;
}
console.log(a);

此时会报错ReferenceError，由于let/const支持块级做用域，因此let定义的a只在{}能够访问

不存在变量提高

与var不一样的是，let/const声明的变量不存在变量提高，也就是说{}对于let/const是有效的。

来看一个var的例子:

console.log(a);
var a = 1;

此时会输出undefined，由于var声明的变量会提高到做用域顶部（只提高声明，不提高赋值）

来看一个let的例子(const效果也同样):

console.log(a);
let a = 1;

此时会报错ReferenceError，由于let不存在变量提高

同一做用域内不能够重复声明

同一做用域内let/const不能够重复声明,var能够。

来看一个var的例子:

var a = 1;
var a = 2;
console.log(a);

此时会输出2，var是支持重复声明的，后面声明的值会覆盖前面声明的值。

来看一个let的例子(const效果也同样):

let a = 1;
let a = 2;
console.log(a);

此时会报错SyntaxError，由于同一做用域内let/const不能够重复声明。

再来看一个不一样做用域的例子：

let a = 1;
{
  let a = 2;
}
console.log(a);

此时输出1，由于二者做用域不一样

暂存死区

暂存死区TDZ(Temporal Dead Zone)是ES6中对做用域新的语义。

经过let/const定义的变量直到执行他们的初始化代码时才被初始化。在初始化以前访问该变量会致使ReferenceError。该变量处于一个自做用域顶部到初始化代码之间的“暂存死区”中。

来看如下例子：

function do_something() {
  console.log(bar); // undefined
  console.log(foo); // ReferenceError
  var bar = 1;
  let foo = 2;
}
do_something();

var定义的变量声明会提高到做用域顶部，因此bar是undefined，而let定义的变量从做用域开始到let foo=2这中间都没法访问，访问会报错ReferenceError

暂存死区与typeof

typeof检测var定义的变量或者检测不存在的变量时会返回undefined，若是检测暂存死区内的变量，会报错ReferenceError.

console.log(typeof foo); // undefined
console.log(typeof bar); // ReferenceError
console.log(typeof bar2); // undefined
let bar = 1;
var bar2 = 2;

也就是说typeof去检测未初始化的let变量时会报错，var或者未声明的变量不会报错

面试题

function test(){
   var foo = 33;
   {
      let foo = (foo + 55);
   }
}
test();

以上函数执行结果是什么?为何?

报错

{}内有let定义的foo，因此存在暂存死区，(foo + 55)这个表达式是在let foo以前执行的(赋值时先执行等号右边的，执行完毕把结果赋给等号左边)，表达式执行的时候尚未初始化foo，因此报错ReferenceError

总结

1. let/const支持函数做用域和块级做用域,var只有函数做用域
2. let/const不存在变量提高，var存在变量提高
3. let/const同一做用域内不能够重复声明，var能够重复声明
4. let/const存在暂存死区，var不存在

面试题

let b = 1;

function test4() {
    console.log(b);
    let b = 2;
}
test4()