使用 Babel.js 将 ES6 箭头函数编译为 Es5

Question

在 Mozilla 文档中查看 ES6 箭头函数的文档时，我了解到箭头函数应用严格模式的所有规则，link 中描述的除外。

  var f = () => { 'use strict'; return this};
    var g = function () { 'use strict'; return this;}

    console.log(f()); //prints Window
    console.log(g()); // prints undefined

    //we can test this in firefox!

但是，Babel.js正在将箭头函数代码转译为 returns undefined 而不是 Window(demo link) [=45= 的 ES5 代码]

"use strict";

setTimeout(function () {
  return undefined;
}, 100);

所以，上面的片段是 Babel.js 的输出。不就是下面的输出吗？

"use strict";

setTimeout(function () {
  return this;
}.bind(Window), 100);

如果我正在编写 ES6，我希望 Window 而不是 undefined
这是一个错误吗？
或者，我误解了什么？

Answer 1

如MDN所述，原则上你是正确的。然而，Babel 总是在根范围内放置一个 'use strict' 。实际上你编译了以下内容：

'use strict';
var f = () => { 'use strict'; return this};

在这种情况下，严格的规则适用。请参阅编译示例 here。 Babel 甚至优化了顶级 this 因为它保证是 undefined.

Answer 2

tl;dr: Babel 假定每个文件都是一个模块。默认情况下，模块 strict 并且它们的 this 值为 undefined.

这在 Babel FAQ:

Babel assumes that all input code is an ES2015 module. ES2015 modules are implicitly strict mode so this means that top-level this is not window in the browser nor is it exports in node.

If you don't want this behaviour then you have the option of disabling the strict transformer:
$ babel --blacklist strict script.js

require("babel").transform("code", { blacklist: ["strict"] });
PLEASE NOTE: If you do this you're willingly deviating from the spec and this may cause future interop issues.

See the strict transformer docs for more info.

使用 Babel.js 将 ES6 箭头函数编译为 Es5

Compiling ES6 arrow functions to Es5 using Babel.js

javascript

scope

lexical-scope

ecmascript-6

babeljs