ES6 Unterschied zwischen Pfeil Funktion und Methodendefinition

Question

Was ist der Unterschied zwischen folgenden Funktionen ist

module.exports = utils.Backbone.View.extend({ 
    handler:() => { 
     console.log(this); 
    } 
}); 

und

module.exports = utils.Backbone.View.extend({ 
    handler() { 
     console.log(this); 
    } 
}); 

Warum in ersten Fall this === window?

Answer 1

Da Pfeilfunktionen diesen Kontext nicht selbst erstellen, hat this den ursprünglichen Wert aus dem umschließenden Kontext.

In Ihrem Fall ist der einschließende Kontext der globale Kontext, so this in der Pfeilfunktion ist window.

const obj = { 
    handler:() => { 
    // `this` points to the context outside of this function, 
    // which is the global context so `this === window` 
    } 
} 

Auf der anderen Seite, den Kontext für die regulären Funktionen dynamisch ist und wenn eine solche Funktion wird als eine Methode für ein Objekt definiert ist, this Punkte an den besitzenden Objekts Methode.

const obj = { 
    handler() { 
    // `this` points to `obj` as its context, `this === obj` 
    } 
} 

Die obige Syntax verwendet ES6 method shorthand. Es entspricht funktionell:

const obj = { 
    handler: function handler() { 
    // `this` points to `obj` as its context, `this === obj` 
    } 
}