Beantworten Sie diese Frage zu ES6-Pfeilfunktionen

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

(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 Objekt obj.

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

Ähnlich:

(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

Das ist seltsam, oder? So verstehe ich es. Dies ist gebunden, wenn es in ES6 definiert ist Was vererbt werden sollte, ist dies im übergeordneten Ausführungskontext, und es sollte nicht der übergeordnete Ausführungskontext sein! ! ! 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, und dieses Innere zeigt darauf ist im Allgemeinen global, oder dies in der Umgebung, in der sich das Objekt befindet.

Verwandte Empfehlungen:

Analyse der Verwendung von Pfeilfunktionen in ReactJs

Einführung in die Verwendung von JavaScript-Pfeilfunktionen

Codebeispiele, die den Unterschied und die Verwendung gewöhnlicher Funktionen und Pfeilfunktionen in JavaScript erklären

Das obige ist der detaillierte Inhalt vonBeantworten Sie diese Frage zu ES6-Pfeilfunktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!