Wohin zeigt dies in den ES6-Pfeilfunktionen?-js-Tutorial-php.cn

Wohin zeigt dies in den ES6-Pfeilfunktionen?

php中世界最好的语言

Freigeben： 2018-03-17 13:33:19

Original

2780 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wohin dies in der ES6-Pfeilfunktion führt und welche Vorsichtsmaßnahmen bei der Verwendung in der ES6-Pfeilfunktion gelten. Hier ist ein praktischer Fall, schauen wir uns das 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) 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 von obj.

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

Nach dem Login kopieren

(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

Nach dem Login kopieren

Ähnlich:

(3)

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

Nach dem Login kopieren

Ausgabe 11

Pfeilfunktionsfall:

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

Nach dem Login kopieren

Es ist seltsam, nicht wahr? So verstehe ich es? Wenn ich die spezifische Bedeutung der Bindung in ES6 definiere, sollte dies im übergeordneten Ausführungskontext vererbt 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 Pfeilfunktionstransformation 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);
}

Nach dem Login kopieren

Wenn Sie also ein Objekt definieren, definieren Sie die Objekteigenschaften, und diese im Inneren zeigen normalerweise auf die globale Welt oder den Ort, an dem sich das Objekt befindet befindet sich dies in dieser Umgebung.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

Empfohlene Lektüre:

So ändern Sie den Status des Radios mit JS

So stellen Sie die Bootstrap-Tabelle auf den Höhenprozentsatz ein

Der Unterschied zwischen var foo = function () {} und function foo()

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