ES6-块级作用域

1. 为什么需要块级作用域

        ES6之前只有全局作用域和局部作用域(函数作用域)，没有块级作用域，会带来很多不合理的情况。

第一：内层变量可能会覆盖外层变量

// 1.内部变量可能会覆盖外部变量
   var num = 100
   function fn() {
       console.log(num);
       if(true){
           var num = 200;
       }
   }
   fn() //undefined

这段代码的原意是: if语句外部使用外层的num, if语句的内部使用内层的num，但是由于函数fn的定义的num存在变量提升，覆盖了外层的num变量，所以输出结果为undefined。

第二： 用来计数的循环变量泄露为全局变量

 // 2.用来计数的循环变量泄露为全局变量
 var arr = [1,2,3,4,5];
 for(var i = 0; i < arr.length; i++) {
     console.log(arr[i]);
 }
 console.log(i); // 5

变量 i 只用来控制循环，但是循环结束后，他并没有消失，泄露成为了全局变量。

2. 什么是块级作用域？

块级作用域由{ }包裹，例如if语句和for语句，通过let声明变量可以实现块级作用域。

例1：

 function fn() {
      let num = 10;
      if(true) {
         let num = 20;
      }
      console.log(num);
  }
  fn() // 10

if 语句的外层和内层都声明了num变量，输出的结果为10，说明if语句的块级作用域不会影响到外层作用域，如果是都用var声明则输出的结果为 20。

例2：

 var arr = [1,2,3];
 for(let i = 0; i < arr.length; i++) {
     arr[i] = function() {
         console.log(i);
     }
 }
 arr[0](); //0
 arr[1](); //1
 arr[2](); //2

 

let在代码块中都有自己的作用域，在for循环中 i 的每一个值都会单独存在一个独立的作用域，arr[i]不会被之前的arr[i]给覆盖掉。