javascript - es6箭头函数

Question

今天看《ECMAScript6入门》的时候，有个问题没理解：

let foo = 'outer';

function bar(func = x => foo){
    let foo = 'inner';
    console.log(func());
}

bar(); //输出‘inner’

但是我看书上写的是输出'inner'，解释是func定义的是在全局环境下定义的，因此foo获取的值为'outer'，最后应该输出'outer'。但是最后输出的却是'inner',那这里是说明func函数定义的时候是在函数bar内部吗？

---

好吧。看了下Babel转换过来的代码：

'use strict';

var foo = 'outer';

function bar() {
    var func = arguments.length <= 0 || arguments[0] === undefined ? function (x) {
        return foo;
    } : arguments[0];
    return (function () {
        var foo = 'inner';
        console.log(func());
    })();
}

bar();

很明显这个地方声明的func函数是访问不到下面匿名函数里面声明的变量foo,因此必须要通过在全局中声明的变量foo才能获取到相应的值。最后输出outer

Answer 1

使用babel转译并运行后输出的的确是outer。

转译后的结果如下：

'use strict';

var foo = 'outer';

function bar() {
    var func = arguments.length <= 0 || arguments[0] === undefined ? function (x) {
        return foo;
    } : arguments[0];
    return (function () {
        var foo = 'inner';
        console.log(func());
    })();
}

bar();

应该很好理解原因了吧。

Answer 2

翻译成es5就是

'use strict';

var foo = 'outer';

function bar() {
    var func = function (x) {
        return foo;
    };

    var foo = 'inner';
    console.log(func());
}

bar();