Question

在研究ES6箭头功能时，关于Mozilla文档的文档，我知道Arrow函数应用了严格模式的所有规则，除了link中描述的那些规则

＆＃13;

  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!

＆＃13;

但是，Babel.js正在将箭头功能代码转换为ES5代码，该代码返回undefined而不是Window（demo link）

＆＃13;

"use strict";

setTimeout(function () {
  return undefined;
}, 100);

＆＃13;

＆＃13;
因此，上面的片段是Babel.js的输出。它不能是以下输出吗？

＆＃13;

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

＆＃13;

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

Answer 1

tl; dr： Babel假设每个文件都是模块。模块默认为严格，其this值为window。

SQL Fiddle：

中介绍了这一点

Babel假设所有输入代码都是ES2015模块。 ES2015模块是隐式严格模式，因此这意味着浏览器中的顶级exports不是$ babel --blacklist strict script.js require("babel").transform("code", { blacklist: ["strict"] });，节点中也不是context.Entry(Guild.Members).State = Entity.EntityState.Unchanged。

如果您不想要此行为，则可以选择禁用严格变换器：
{{1}}
请注意：如果你这样做，你愿意偏离规范，这可能会导致未来的互操作问题。

有关详细信息，请参阅Babel FAQ。

Answer 2

原则上你是正确的，如MDN所述。但是，Babel始终在根范围放置'use strict'。实际上，您编译以下内容：

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

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

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

2 个答案: