Funzione freccia nell'oggetto letterale

Question

Sto cercando di capire perché una funzione di freccia in un oggetto letterale viene chiamata con window come this. Qualcuno può darmi qualche intuizione?

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

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

e un oggetto che funziona come previsto:

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

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

Secondo Babel REPL, stanno transpiled a

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

E

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

Perché non è arrowObject.printName(); chiamato con arrowObject come this?

I registri della console sono da Fiddle (dove non è utilizzato use strict;).

Answer 1

Si noti che la traduzione di Babel sta assumendo la modalità rigorosa, ma il risultato con window indica che si sta eseguendo il codice in modalità libera. Se dite Babel ad assumere modalità sciolto, la sua transpilation is different:

var _this = this;     // ** 

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

Annotare il _this globale e console.log(_this);, al posto del console.log(undefined); dalla rigorosa modalità transpilation.

che sto cercando di capire il motivo per cui una funzione di freccia in un oggetto letterale è chiamato con window come this.

Poiché le funzioni freccia ereditano this dal contesto in cui sono state create. A quanto pare, dove si sta facendo questo:

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

... this è window. (Il che suggerisce che non stai usando la modalità rigorosa, ti consiglio di utilizzarlo dove non c'è una chiara ragione per non farlo.) Se fosse qualcos'altro, come lo undefined del codice globale della modalità rigorosa, this all'interno della funzione freccia sarebbe altro valore invece.

Può essere un po 'più chiaro ciò che il contesto è dove si crea la funzione freccia se rompiamo il tuo initializer nel suo equivalente logico:

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