2016-07-26 10 views
0

Zuerst versucht, diese -Warum ist "dies" innerhalb einer Fettpfeilfunktionsdefinition nicht definiert? Ich

const profile = { 
    name: 'Alex', 
    getName: function(){ 
     return this.name; 
    } 
}; 

der gut arbeitet. Jetzt habe ich das gleiche mit fettem Pfeil versucht. In diesem Fall kommt "das" undefiniert.

const profile = { 
    name: 'Alex', 
    getName:() => { 
     return this.name; 
    } 
}; 

Das gibt mir einen Fehler

TypeError: Cannot read property 'name' of undefined

Was ich gelernt, sind fett Pfeil Syntaxen Weise besser Umgang mit impliziten "this". Bitte erklären Sie, warum dies geschieht.

+0

Ja, diese Frage sie antwortet: http://stackoverflow.com/questions/31095710/methods-in-es6-objects-using-arrow-functions –

+0

https: //developer.mozilla. org/de/docs/Web/JavaScript/Referenz/Funktionen/Arrow_functions – Dellirium

+0

Auch ein Duplikat von [Arrow Funktion vs Funktion Erklärung/Ausdrücke: Sind sie gleichwertig/austauschbar?] (http://stackoverflow.com/q/34361379/218196) –

Antwort

1

Wie normale Funktionen hat die Arrow-Funktion weder this noch eine eigene, nur reguläre Funktion und globalen Gültigkeitsbereich und this eigene.

Was das bedeuten würde, wenn this in Pfeil funciton bezeichnet werden würde, wird es den Umfang aufzublicken starten Sie den Wert von this, oder in diesem Fall zu finden, während Look fand es, dass die object ist nicht mit einem this von seiner eigenen, daher ging es bis zu globaler Reichweite, und verband den Wert von this mit globaler Reichweite, wo es nichts finden wird. Diese zwei Beispiele lösen deine Zweifel.

var obj = { 
    a : 'object???', 
    foo :() => { console.log(this.a) } 
}; 

var a = 'global!!!'; 

obj.foo();    // global!!! 

Wrapping Pfeil innerhalb einer Funktion

var obj = { 
    a : 'object???', 
    foo : function() { 
     return (() => { 
      console.log(this.a) 
     })(); 
    } 
}; 

var a = 'global!!!'; 

obj.foo(); 

Hier, ich habe versucht, die behvauiour von this für Pfeil in der Tiefe zu erklären.

https://github.com/anirudh-modi/JS-essentials/blob/master/ES2015/Functions/Arrow%20functions.md#how-this-is-different-for-arrow-functions

Verwandte Themen