對象文字中的箭頭函數

Question

我想弄清楚爲什麼在對象文本中的箭頭函數被調用window作爲this。有人能給我一些見解嗎？

var arrowObject = { 
    name: 'arrowObject', 
    printName:() => { 
    console.log(this); 
    } 
}; 

// Prints: Window {external: Object, chrome: Object ...} 
arrowObject.printName(); 

和預期的一樣，工程的對象：

var functionObject = { 
    name: 'functionObject', 
    printName: function() { 
    console.log(this); 
    } 
}; 

// Prints: Object {name: "functionObject"} 
functionObject.printName(); 

據Babel REPL，他們transpiled到

var arrowObject = { 
    name: 'arrowObject', 
    printName: function printName() { 
    console.log(undefined); 
    } 
}; 

而且

var functionObject = { 
    name: 'functionObject', 
    printName: function printName() { 
    console.log(this); 
    } 
}; 

爲什麼不arrowObject.printName();與arrowObject聯繫爲this？

控制檯日誌來自Fiddle（其中use strict;未使用）。

Answer 1

請注意，Babel翻譯採用了嚴格模式，但使用window的結果表明您正在鬆散模式下運行代碼。如果你告訴通天的鬆散模式，其transpilation is different：

var _this = this;     // ** 

var arrowObject = { 
    name: 'arrowObject', 
    printName: function printName() { 
    console.log(_this);    // ** 
    } 
}; 

注意_this全球和console.log(_this);，而不是console.log(undefined);從嚴格的模式transpilation。

我試圖找出爲什麼在一個對象字面箭頭函數調用window爲this。

由於箭頭函數從創建它們的上下文繼承this。顯然，在這裏你這樣做：

var arrowObject = { 
    name: 'arrowObject', 
    printName:() => { 
    console.log(this); 
    } 
}; 

... this是window。 （這表明您沒有使用嚴格模式;我建議在沒有明確理由的情況下使用它）。如果是其他內容，例如嚴格模式全局代碼undefined，則箭頭函數內的this應該是其他值代替。

它可能是一個有點清晰的背景是什麼地方，如果我們打破你的初始化成其邏輯等價箭頭功能創建：

var arrowObject = {}; 
arrowObject.name = 'arrowObject'; 
arrowObject.printName =() => { 
    console.log(this); 
};