Worauf bezieht sich "this" in den Pfeilfunktionen in ES6?

Question

Ich habe an mehreren Stellen gelesen, dass der entscheidende Unterschied ist, dass "this lexikalisch in Pfeilfunktionen gebunden ist." Das ist alles gut und schön, aber ich weiß nicht, was das bedeutet.

Ich weiß es bedeutet, es ist einzigartig innerhalb der Grenzen der geschweiften Klammern, die den Körper der Funktion definieren, aber ich konnte Ihnen nicht die Ausgabe des folgenden Codes sagen, weil ich keine Ahnung habe, was this bezieht sich auf, es sei denn es bezieht zur fetten Pfeilfunktion selbst .... was nicht sinnvoll erscheint.

var testFunction =() => { console.log(this) }; 
testFunction(); 

Answer 1

Arrow functions capture the this value of the enclosing context

function Person(){ 
    this.age = 0; 

    setInterval(() => { 
    this.age++; // |this| properly refers to the person object 
    }, 1000); 
} 

var p = new Person(); 

, also direkt Ihre Frage, this in Ihrem Pfeil Funktion beantworten würde den gleichen Wert hat, wie es richtig gemacht, bevor die Pfeil-Funktion zugewiesen wurde.

Answer 2

Ich hoffe, diese Code-Show könnte Ihnen eine klarere Vorstellung geben. Im Grunde ist "dies" in der Pfeilfunktion die aktuelle Kontextversion von "this". Siehe den Code:

// 'this' in normal function & arrow function 
var this1 = { 
    number: 123, 
    logFunction: function() { console.log(this); }, 
    logArrow:() => console.log(this) 
}; 
this1.logFunction(); // Object { number: 123} 
this1.logArrow(); // Window 

Answer 3

Um das große Bild zu liefern, werde ich erklären, beide, dynamische und lexikalische Bindung.

Dynamic Name Bindung

this bezieht sich auf das Objekt die Methode aufgerufen wird. Dies ist ein regelmäßig zu lesender Satz zu SO. Aber es ist immer noch nur eine Phrase, ziemlich abstrakt. Gibt es zu diesem Satz ein entsprechendes Codemuster?

Ja, es gibt:

const o = { 
    m() { console.log(this) } 
} 

// the important patterns: applying methods 

o.m(); // logs o 
o["m"](); // logs o 

m ist ein Verfahren, weil es auf this beruht. o.m() oder o["m"]() bedeutet, dass m auf o angewendet wird. Diese Muster sind die Javascript-Übersetzung zu unserem berühmten Satz.

Es ist ein weiteres wichtiges Codemuster, die Sie achten sollen:

"use strict"; 

const o = { 
    m() { console.log(this) } 
} 

// m is passed to f as a callback 
function f(m) { m() } 

// another important pattern: passing methods 

f(o.m); // logs undefined 
f(o["m"]); // logs undefined 

Es ist sehr ähnlich zu dem vorherigen Muster, nur die Klammer fehlen. Aber die Konsequenzen sind beträchtlich: Wenn Sie m an die Funktion f übergeben, ziehen Sie m von seinem Objekt/Kontext o heraus. Es wird jetzt entwurzelt und this bezieht sich auf nichts (strikter Modus vorausgesetzt).

Lexical (oder Static) Name Binding

Pfeil Funktionen haben keine eigene this/super/arguments Bindung. Sie erben sie von ihren Eltern lexikalischen Gültigkeitsbereich:

const toString = Object.prototype.toString; 
 

 
const o = { 
 
    foo:() => console.log("window", toString.call(this)), 
 
     
 
    bar() { 
 
    const baz =() => console.log("o", toString.call(this)); 
 
    baz(); 
 
    } 
 
} 
 

 
o.foo() // logs window [object Window] 
 
o.bar() // logs o [object Object]

Neben dem globalen Bereich (Window in Browsern) nur Funktionen sind in der Lage einen Bereich in Javascript (und {} Blöcken in ES2015) zu bilden.Wenn die Pfeilfunktion aufgerufen wird, gibt es keine Umgebungsfunktion, von der baz seine this erben könnte. Folglich erfasst es die this Bindung des globalen Bereichs, der an das Window Objekt gebunden ist.

Wenn baz von o.bar aufgerufen wird, wird der Pfeil Funktion durch o.bar umgeben (o.bar bildet die Mutterlexikalischen Gültigkeitsbereich) und kann erben o.bar ‚s this binden. o.bar wurde unter o aufgerufen und somit ist dessen this an o gebunden.

Answer 4

Sie können versuchen, es unter

// whatever here it is, function or fat arrow or literally object declare 
// in short, a pair of curly braces should be appeared here, eg: 
function f() { 
    // the 'this' here is the 'this' in fat arrow function below, they are 
    // bind together right here 
    // if 'this' is meaningful here, eg. this === awesomeObject is true 
    console.log(this) // [object awesomeObject] 
    let a = (...param) => { 
    // 'this is meaningful here too. 
    console.log(this) // [object awesomeObject] 
} 

so ‚this‘ in Fett Pfeil Funktion nicht, indem Sie die Art und Weise zu verstehen, gebunden ist, bedeutet, dass Sie nicht etwas binden ‚dies‘ hier machen können, .apply gewonnen 't, .call wird nicht, .bind nicht. 'this' in Fett Pfeil Funktion ist gebunden, wenn Sie den Code-Text in Ihrem Texteditor notieren. "Dies" in Fettpfeil-Funktion ist hier wörtlich sinnvoll. Was Ihr Code hier im Texteditor schreibt, ist, was Ihre App dort in repl ausführt. Was in fettem Fehler gebunden ist, ändert sich nie, es sei denn, Sie ändern es im Texteditor. Sorry für meinen Pool Englisch ...

Answer 5

Pfeil Funktion this in ES6 an die umgebend Eltern zeigen wird, bedeutet dies nicht den Fall Umfang wie anonyme Funktionen in ES5 ...

Es ist sehr nützliche Möglichkeit, die Zuordnung zu vermeiden var selbst dazu, die weit in ES5 verwendet wird ...

Sehen Sie sich das Beispiel unten eine Funktion innerhalb eines Objekts zuweisen:

var checkThis = { 
    normalFunction: function() { console.log(this); }, 
    arrowFunction:() => console.log(this) 
}; 

checkThis.normalFunction(); //Object {} 
checkThis.arrowFunction(); //Window {external: Object, chrome: Object, document: document, tmpDebug: "", j: 0…}