オブジェクトリテラルの矢印機能

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によると、彼らは

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

そして

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

にtranspiledていないのはなぜと呼ばれるはthisとなりますか？

コンソールログは、Fiddle（use strict;は使用しません）です。

Answer 1

Babelの変換は厳密なモードを想定していますが、windowという結果は、コードが緩いモードで実行されていることを示しています。 _thisグローバルとconsole.log(_this);

var _this = this;     // ** 

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

注意、代わりにあなたの厳格モードtranspilationからconsole.log(undefined);の：あなたは、looseモード、そのtranspilation is differentを想定するバベルを教えてください。

私はオブジェクトリテラルの矢印機能がthisとしてwindowと呼ばれている理由を把握しようとしています。

arrow関数は、作成されたコンテキストからthisを継承するためです。どうやら、あなたはこれをやっている場所：

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

を... thisはwindowです。 （厳密なモードを使用していないことが示唆されていますが、明確な理由がないところで使用することをお勧めします）undefined（厳密なモードのグローバルコードなど）の場合は、矢印機能内のthis代わりに他の値。

私たちがその論理的同等にあなたの初期化子を破る場合は、矢印関数が作成される場所のコンテキストが何であるかを少し明確にすることができる。（オブジェクトが作成される）外側のコンテキストは `これを持っているとき

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