关于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编译之前和编译之后的执行结果是不一样的。
为啥，暂时不知道，研究中。。。