關於ES6塊級作用域的一個問題

代碼1

let a44 = 10;
if(true){
    console.log("A",a44)
    a44 = 20
    console.log("B",a44)
    function a44(){
        console.log("C",a44)
    }
    console.log("D",a44)
    a44 = 30
    console.log("E",a44)
}
console.log("F",a44)

上面的語句的執行結果，很好預測。

代碼2

let a5 = 10;
{
    console.log("A",a5, window.a5)
    a5 = 20
    console.log("B",a5, window.a5)
    function a5(){
        console.log("C",a5, window.a5)
    }
    console.log("D",a5, window.a5)
    a5 = 30
    console.log("E",a5, window.a5)
}
console.log("F",a5, window.a5)

在let和function定義變量的條件下，if(true)和代碼塊{}兩者的效果也一樣。

代碼3

var a6 = 10;
{
    console.log("A",a6, window.a6)
    a6 = 20
    console.log("B",a6, window.a6) 
    function a6(){
        console.log("C",a6, window.a6)
    }
    console.log("D",a6, window.a6) // ★在這一句中，a6和window.a6的值變成了一樣
    a6 = 30
    console.log("E",a6, window.a6)
}
console.log("F61",a6, window.a6)

這裏就出現了和以往都不同的結果。

使用babel編譯成es5的情況試試，安裝兩個包，配置一下.babelrc。

npm install --global babel-cli

# .babelrc
{ "presets":["es2015"], "plugins":[] }

npm install --save-dev babel-preset-es2015

編譯

babel .\input.js --out-file output.js

結果：

var a6 = 10;
{
    var _a2 = function _a() {
        console.log("C", _a2, window.a6);
    };

    console.log("A", _a2, window.a6);
    _a2 = 20;
    console.log("B", _a2, window.a6);

    console.log("D", _a2, window.a6);   // ★babel編譯後，結果和編譯之前不一樣
    _a2 = 30;
    console.log("E", _a2, window.a6);
}
console.log("F61", a6, window.a6);

但是！結果又變得不一樣：

所以，
這段代碼，babel編譯之前和編譯之後的執行結果是不一樣的。
爲啥，暫時不知道，研究中。。。