Функция стрелки в объекте Literal

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); 
};