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. 變量做用域