使用Babel.js將ES6箭頭函數編譯為Es5

Question

在查看有關Mozilla文檔的ES6 arrow函數文檔時，我知道Arrow函數應用了嚴格模式的所有規則，除了鏈接中描述的那些規則

  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將箭頭功能代碼轉換為ES5代碼，返回undefined而不是Window （ 演示鏈接 ）

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

所以，上面的代碼片段是Babel.js的輸出。 難道不是下面的輸出？

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

如果我正在編寫ES6，我會期望Window而不是undefined
這是一個錯誤嗎？
或者，我誤解了什么？

Answer 1

tl; dr： Babel假設每個文件都是一個模塊 。 模塊是嚴格的默認和他們的this值是undefined 。

---

這包含在Babel FAQ中 ：

Babel假設所有輸入代碼都是ES2015模塊。 ES2015模塊是隱含嚴格的模式，這意味着頂層this不是window的瀏覽器也不是exports的節點。

如果您不想要此行為，則可以選擇禁用嚴格轉換器：

 $ babel --blacklist strict script.js require("babel").transform("code", { blacklist: ["strict"] }); 

請注意：如果你這樣做，你願意偏離規范，這可能會導致未來的互操作問題。

有關詳細信息，請參閱嚴格的變換器文檔 。

Answer 2

原則上你是正確的，如MDN所述 。 但是，Babel總是在根范圍內放置'use strict' 。 實際上，您編譯以下內容：

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

在這種情況下，嚴格的規則都適用。 請參閱此處的編譯示例。 Babel甚至會優化掉的頂層this ，因為它是保證undefined 。