ES6淺析之路一

三月發表於2019-02-16

(個人理解ES6就是對ES5的BUG修改和升級)
廢話不多說今天要探討的是 var與let
ECMAScript 6 入門 作者：阮一峰

下面是個人總結：
let不允許在相同作用域內，重複宣告同一個變數。
let 特點是塊級作用域

先來看一下ES5中時常出現的變數提升的問題！

    var tmp = new Date();
    function f() {
        console.log(tmp);
        if(false) {
            var tmp = `hello world`;
        }
        console.log(tmp);
    }

輸出結果為undefined，原因在於變數提升，導致內層的tmp變數覆蓋了外層的tmp變數。

在ES6的語法中解決的變數提升的問題 是這麼實現的！

    function f1() {
         let n = 5;
        if (true) {
            let n = 10;
        }
        console.log(n); // 5
    }

這裡大家可以自己試驗 將內層 和外層的 n 分別用var let 來定義 就發現
let不允許在相同作用域內，重複宣告同一個變數。
lef 特點是塊級作用域
let 的特點得到明顯的體現！

再看一個ES5中的迴圈變數洩露為全域性變數

    var s = `hello`;
    for (var i = 0; i < s.length; i++) {
      console.log(s[i]);
    }
    console.log(i); // 5

很明顯i成了全域性變數。
ES6中

    for (let i = 0; i < 10; i++) {
      // ...
    }
    
    console.log(i); 
    // ReferenceError: i is not defined

這表明，let宣告的變數只在它所在的程式碼塊有效。

本人目前瞭解的還不夠深！
比如ES6中新增一個新的詞彙 “暫時性死區”（temporal dead zone，簡稱 TDZ）。

    var tmp = 123;
    if (true) {
      tmp = `abc`; // ReferenceError
      let tmp;
    }

我可以把它理解為ES6解決不了的BUG！非要給他定義成一個詞彙麼？（笑死）！
也希望大牛前來解答探討！

相關文章