ES6新特性系列之let命令

ES6自2015年6月诞生就被人寄予厚望，其提供的很多新特性逐渐被人所接受，目前很多前端的框架，像AngularJS2，Vue2，React等都已经对ES6提供了完美的支持。从今天开始，我们就慢慢来学习下ES6的新特性，首先要讲的是let命令。

let命令

let命令类似于var，用来定义一个变量，但是它所定义的变量只在该代码块内部有效

let与var定义变量

我们再来看一下之前讲过的一个跟闭包有关的内容，如果不熟悉的可以看下这篇文章《前端面试中不可逃避的闭包问题，你真的了解吗？》

var定义变量i

上述的例子由于闭包的存在，可以很容易知道输出值为10

但是如果我们用let去声明变量i，则会有不同的结果

let定义变量i

由于let定义的变量i只在块级作用域内生效，相当于每一轮循环都是一个新的变量，最后会输出6

• 特殊之处

在for循环中使用let定义变量时，会存在父子作用域的概念，for循环语句部分是父作用域，循环体里是子作用域，父子作用域延续作用域链的概念，但是两者内容的变量值不会影响

for循环的父子作用域

由于函数体内部是单独的子作用域，因此会直接输出abc三次

• 不存在变量提升

利用let和var定义变量还有一个很大的区别就是，let定义的变量不存在变量提升，如果不懂得变量提升概念的可以看下《Javascript中的变量提升和函数提升》

let不存在变量提升

由于使用let命令不存在变量提升，则相当于在未定义变量的时候直接引用，会输出not defined的错误

• 暂时性死区

暂时性死区(temporal dead zone，简称 TDZ)表示的是，使用let命令定义变量之前的代码中，是不能使用该变量的，如果直接使用，会直接报错

暂时性死区

上述代码中，可以看出tmp变量在代码块中的第三行定义的，因此第一行至第三行之间会看做是TDZ，如果在这部分之间引用tmp变量，会直接报错。而TDZ结束之后，可以正常引用tmp变量

• 不允许重复声明

ES6规定，在使用let定义变量时，如果是相同的作用域内，不能重复声明

不允许重复声明

ES6的块级作用域

在ES5中只存在函数级作用域，如果没有函数，则是最外层作用域，可以看做是window上。而在ES6中增加了块级作用域，而且每个块级作用域是一个独立的作用域

块级作用域

• 块级作用域与函数声明

在ES5环境中，是不存在块级作用域的，函数声明是会被提升的

ES5中函数级作用域

在ES5的环境中，由于存在函数声明提升的情况，我们可以很容易想到最终会输出“I aminside”。

但是如果在ES6的环境中，理论上根据块级作用域的概念，是会输出“I am outside”，但是真正运行的时候会发现会报错

ES6环境报错

为什么会出现这种情况呢？

为了兼容性的问题，浏览器可以有自己的ES6实现方式

1. 允许在块级作用域内声明函数

2. 声明函数时类似于var，会出现函数声明提升的情况，会被提升到函数作用域的顶部，同时会被提升到块级作用域的顶部

这两条规则是只针对浏览器环境下才有效，其他环境下会当做let来处理

所以上述的代码在ES6浏览器中实际执行的是下面的代码

实际执行代码

总结

今天这篇文章主要讲了下ES6的let命令，由于其与var命令还是有很大的不同，需要大家平时多使用，才能更好的理解