Arrow Funktion im Objekt Literal

Question

Ich versuche herauszufinden, warum eine Pfeilfunktion in einem Objektliteral mit window als this aufgerufen wird. Kann mir jemand einen Einblick geben?

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

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

Und ein Objekt, das wie erwartet funktioniert:

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

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

Nach Babel REPL, sie transpiled zu

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

Und

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

Warum nicht ist arrowObject.printName(); genannt mit arrowObject als this?

Konsolenprotokolle sind von Fiddle (wobei use strict; nicht verwendet wird).

Answer 1

Beachten Sie, dass die Babel-Übersetzung einen strikten Modus annimmt, aber Ihr Ergebnis mit window zeigt an, dass Sie Ihren Code im lockeren Modus ausführen. Wenn Sie Babel sagen lose Modus zu übernehmen, seine transpilation is different:

var _this = this;     // ** 

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

Notiere die _this global und console.log(_this); anstelle der console.log(undefined); von Ihrem strengen-Modus transpilation.

Ich versuche, eine Pfeil Funktion in einem Objekt, um herauszufinden, warum wörtlichen mit window als this genannt wird.

Da Pfeilfunktionen this aus dem Kontext erben, in dem sie erstellt werden. Offenbar wo Sie tun dies:

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

... this ist window. (Was darauf hindeutet, dass Sie nicht den strikten Modus verwenden; ich würde empfehlen, es zu verwenden, wo es keinen klaren Grund gibt, nicht.) Wenn es etwas anderes wäre, wie der undefined des strikten Modus globalen Codes, würde this innerhalb der Pfeilfunktion sein anderer Wert stattdessen.

Es etwas klarer sein kann, was der Kontext ist, wo der Pfeil-Funktion erstellt wird, wenn wir Ihre initializer in seine logische Entsprechung brechen:

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