A cosa si riferisce “questo” nelle funzioni freccia in ES6?

Ho letto in diversi punti che la differenza fondamentale è che ” this è legato lessicamente alle funzioni di freccia”. Va tutto bene, ma in realtà non so cosa significhi.

So che significa che è univoco all’interno dei limiti delle parentesi che definiscono il corpo della funzione, ma non potrei realmente dirti l’output del seguente codice, perché non ho idea di cosa si riferisca a questo, a meno che non si riferisca alla fat fat arrow funzione stessa … che non sembra utile.

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

Le funzioni freccia acquisiscono this valore del contesto che lo racchiude

 function Person(){ this.age = 0; setInterval(() => { this.age++; // |this| properly refers to the person object }, 1000); } var p = new Person(); 

Quindi, per rispondere direttamente alla tua domanda, this all’interno della tua funzione di freccia avrebbe lo stesso valore che aveva prima che fosse assegnata la funzione di freccia.

Per fornire il quadro generale, spiegherò sia l’associazione dynamic che quella lessicale.

Associazione dynamic dei nomi

this riferisce all’object su cui è chiamato il metodo. Questa è una frase da leggere regolarmente su SO. Ma è ancora solo una frase, piuttosto astratta. C’è un modello di codice corrispondente a questa frase?

Si C’è:

 const o = { m() { console.log(this) } } // the important patterns: applying methods om(); // logs o o["m"](); // logs o 

m è un metodo perché si basa su this . om() o["m"]() significa che m è applicato a o . Questi modelli sono la traduzione Javascript della nostra famosa frase.

C’è un altro pattern di codice importante a cui dovresti prestare attenzione:

 "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(om); // logs undefined f(o["m"]); // logs undefined 

È molto simile al modello precedente, mancano solo le parentesi. Ma le conseguenze sono considerevoli: quando si passa m alla funzione f , si estrae m del suo object / contesto o . Ora è sradicato e this riferisce a nulla (modalità rigorosa assunta).

Legame lessicale (o statico)

Le funzioni freccia non hanno il proprio binding / super / arguments . Li ereditano dall’ambito lessicale genitore:

 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] 

Spero che questo codice spettacolo possa darti un’idea più chiara. Fondamentalmente, ‘this’ in arrow function è la versione di contesto corrente di ‘this’. Vedi il codice:

 // '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 

Puoi provare a capirlo seguendo la strada qui sotto

 // 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] } 

così ‘questa’ nella funzione di freccia grossa non è vincasting, significa che non puoi far bind niente a ‘questo’ qui ,.applicare non lo farà, .call non lo farà, .bind non lo farà. ‘this’ in fat arrow function è associato quando scrivi il testo del codice nel tuo text editor . ‘questo’ in funzione freccia grossa è letteralmente significativo qui. Ciò che il tuo codice scrive qui nell’editor di testo è ciò che la tua app esegue in repl. Ciò che ‘questo’ legato nell’arresto di grasso non cambierà mai a meno che non lo si cambi nell’editor di testo . Scusa per la mia piscina inglese …

La funzione Freccia che indica il genitore che circonda in Es6, significa che non ha portata come le funzioni anonime in ES5 …

È un modo molto utile per evitare di assegnare var self a questo che è ampiamente usato in ES5 …

Guarda l’esempio qui sotto, assegnando una funzione all’interno di un object:

 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…}