So verwenden Sie dies in ES6-Pfeilfunktionen

Dieses Mal zeige ich Ihnen, wie Sie dies in der ES6-Pfeilfunktion verwenden. Welche Vorsichtsmaßnahmen gibt es für die Verwendung in der ES6-Pfeilfunktion? Im Folgenden sind praktische Fälle aufgeführt. 1 Steh auf und schau es dir an.

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 . Anstatt beim Ausführen der Funktion zu binden.

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

-Objekt von obj.

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

(2) Die sogenannte Bindung zum Definitionszeitpunkt 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=11function test1(){  this.a=22;  let b=function(){
    console.log(this.a);
  };
  b();
}var x=new test1();
输出11

Pfeilfunktionssituation:

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

Es ist seltsam, nicht wahr? So verstehe ich es. Die spezifische Bedeutung der Bindung sollte von this im übergeordneten Ausführungskontext geerbt werden. ! ! Auf diese Weise werden viele unklare Richtungen in Pfeilfunktionen gelöst.

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

Vertiefendes Verständnis davon in Pfeilfunktionen

In Pfeilfunktionen liegt die Fixierung dieses Punktes nicht daran, dass es einen Mechanismus gibt, um ihn innerhalb der Pfeilfunktion zu binden. Der eigentliche Grund dafür ist Die Pfeilfunktion hat sich selbst überhaupt nicht. Dies führt dazu, dass das interne This das This des äußeren Codeblocks ist. Gerade weil es dies nicht hat, kann es nicht als

Konstruktor verwendet werden.

Wir können die Pfeilfunktionsumwandlung in ES5 simulieren:

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

Wenn Sie also ein Objekt definieren, definieren Sie das Objekt

Attribut , und dieses darin zeigt normalerweise auf Global, oder dies in der Umgebung, in der sich dieses Objekt befindet.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Zusammenfassung der Erfahrungen mit der Verwendung von Python Django in der Entwicklung

ES6-Modulsyntax laden, importieren, exportieren

So verwenden Sie getBoundingClientRect(), um die Scroll-Fixierung des Div-Containers zu implementieren

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