Fragen dazu in ES6-Pfeilfunktionen?

Die Syntax der Pfeilfunktion ist in ES6 neu und zeichnet sich durch Einfachheit und Bequemlichkeit aus. Als nächstes werde ich Ihnen die Pfeilfunktion in diesem Artikel mitteilen

Kurze Einführung: Dies in der Pfeilfunktion zeigt auf eine Funktion, die anders als die allgemeine Funktion definiert ist. Die Definition davon in der Pfeilfunktion: Dies in der Pfeilfunktion ist gebunden, wenn die Funktion definiert ist, nicht, wenn die Funktion wird ausgeführt.

(1) Im Allgemeinen wird die Funktion, auf die dies zeigt, während der Ausführung gebunden. Wenn obj.say() ausgeführt wird, zeigt dies auf das obj-Objekt.

var x=11;
var obj={
 x:22,
 say:function(){
 console.log(this.x)
 }
}
obj.say();
//console.log输出的是22

(2) Die sogenannte Bindung zur Definitionszeit bedeutet, dass dies vom übergeordneten Ausführungskontext geerbt wird! ! Dies, wie zum Beispiel this.x, repräsentiert hier tatsächlich window.x, daher ist die Ausgabe 11.

var x=11;
var obj={
 x:22,
 say:()=>{
 console.log(this.x);
 }
}
obj.say();
//输出的值为11

Ähnliche sind:

(3)

var a=11
function test1(){
 this.a=22;
 let b=function(){
 console.log(this.a);
 };
 b();
}
var x=new test1();

Ausgabe 11

Pfeilfunktionssituation:

var a=11;
function test2(){
 this.a=22;
 let b=()=>{console.log(this.a)}
 b();
}
var x=new test2();
//输出22

Sehr seltsam Nein, So verstehe ich es. Die spezifische Bedeutung der Bindung sollte in ES6 vom übergeordneten Ausführungskontext übernommen werden. ! ! Auf diese Weise werden viele unklare Richtungen in Pfeilfunktionen gelöst.

Hinweis: Einfache Objekte (Nichtfunktionen) haben keinen Ausführungskontext!

Eingehendes Verständnis dafür in der Pfeilfunktion

In der Pfeilfunktion liegt die Fixierung dieses Punktes nicht daran der internen Pfeilfunktion Es gibt einen Mechanismus, um dies zu binden. Der eigentliche Grund ist, dass die Pfeilfunktion überhaupt kein eigenes This hat, also ist das interne This das This des äußeren Codeblocks. Gerade weil es dies nicht hat, kann es nicht als Konstruktor verwendet werden.

Wir können die Pfeilfunktionsumwandlung in ES5 simulieren:

// ES6
function foo() {
 setTimeout(() => {
 console.log('id:', this.id);
 }, 100);
}
// ES5
function foo() {
 var _this = this;

 setTimeout(function () {
 console.log('id:', _this.id);
 }, 100);
}

Wenn Sie also ein Objekt definieren, definieren Sie die Objekteigenschaften. Dieses Innere zeigt normalerweise auf die globale Welt oder die Welt, in der sich das Objekt befindet befindet sich in der Umgebung.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Detaillierte Erläuterung der Leistungsoptimierung von React-Komponenten

Informationen zur Implementierung von Element-UI in der Vue-Tabelle Tabellen-Scroll-Lademethode

So implementieren Sie die Auswahl-Dropdown-Liste über Vue.js. Die spezifischen Vorgänge lauten wie folgt

Das obige ist der detaillierte Inhalt vonFragen dazu in ES6-Pfeilfunktionen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!