Heim > Web-Frontend > js-Tutorial > Hauptteil

Beantworten Sie diese Frage zu ES6-Pfeilfunktionen

小云云
Freigeben: 2018-03-01 09:16:12
Original
1412 Leute haben es durchsucht

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
Nach dem Login kopieren

(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
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

Pfeilfunktionssituation:


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

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);
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage