ES 6 新增的块级作用域let

ES 6 新增的块级作用域let

在2015年之前，JavaScript是没有块级作用域的，之后在ES6版本新增了块级作用域，为了更好的理解ES6这一新特性，我们先提出这几个问题：
1.什么是块级作用域？
2.为什么要添加块级作用域？
3.怎么使用块级作用域？

什么是块级作用域？

块级作用域，就是指在只能在语句块这个范围中起作用，超出这个范围则无效，其中语句块，是指将多个语句放在一对大括号{}里面，通常用于流程控制，比如if,for,while等等。

示例

while (x < 10) {
  if(x>5){
  x++;
  }
}

这里{if(x>5){x++;}}是一个语句块，{x++;}也是一个语句块，巧记：一对大括号就是一个语句块，就代表一个作用域。

为什么要添加块级作用域？

ES6之前，变量只有全局作用域（也称全局变量）和函数作用域（局部变量），所以会导致以下不合理的情况:

1.函数的局部变量会覆盖同名的全局变量。

示例

      var a = 0
      (function() {
        console.log('函数内部调用全局的a：', a) //输出：函数内部调用全局的a： 0
      })()
      console.log('全局变量a：', a) //输出;全局变量a： 0

      var a = 0
      ;(function() {
        console.log('a=', a) //输出：a= undefined，按理说应该输出a=0
        if (false) {
          var a = 1
          console.log(a)
        }
      })()

原因：变量提升导致内层的 a 变量覆盖了外层的 a 变量。

这就导致了如果你要在函数内部调用全局变量，那么函数内声明的局部变量就一定不能和全局变量同名。

2.函数内部中，只要声明了变量，之后在函数结束前，都可以使用。

示例

      (function() {
        console.log(a) //输出：undefined
        if (true) {
          for (var a = 0; a < 10; a++) {
            var b = 0
            console.log(a) //输出：0~9
          }
        }
        console.log('if之外a：', a) //输出：if之外a： 10
        console.log('if之外b：', b) //输出：if之外b： 0
      })()

原因：在for循环中声明的a,b变量，在函数结束前并不会被销毁。

这样就导致了一些不必要的内存消耗。
为了避免这两个不合理的问题，块级作用域就出现了。

怎么使用块级作用域？

使用变量命令let。

示例

      (function() {
        if (true) {
          for (let a = 0; a < 10; a++) {
            console.log(a) //输出：0~9
          }
        }
        console.log('if之外a：', a) //报错：ReferenceError: a is not defined
      })()

对于let命令的变量：

1. 作用域：变量所在的语句块，即一对大括号{}；
2. 不存在变量提升，而是“暂时性死区”，也就是说从块级作用域开始到声明该变量，这段时间里是不能访问该变量的；
3. 同一语句块中，不能被同一变量名不能重复声明。
4. 经典案例：let命令代替闭包功能
   闭包实现：

var arr = [];
for(var i = 0; i < 2; i++){
    arr[i] = (function(i){
        return function(){
            console.log(i);
        };
    }(i));
};
arr[1]();

let 实现：

'use strict';
var arr = [];
for(let i = 0; i < 2; i++){
    arr[i] = function(){
        console.log(i);
    };
};
arr[1]();

参考文章：

1. ES6中啥是块级作用域？运用在哪些地方？
2. 变量作用域