Répondez à cette question sur les fonctions fléchées ES6

Ceci dans la fonction flèche pointe vers une fonction définie différemment de la fonction générale. La définition de ceci dans la fonction flèche : ceci dans la fonction flèche est lié lorsque la fonction est définie, pas lorsque la fonction est exécutée.

(1) Généralement, la fonction vers laquelle cela pointe est liée lors de l'exécution. Lorsque obj.say() est exécuté, cela pointe vers l'objet obj.

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

(2) La soi-disant liaison au moment de la définition signifie qu'elle est héritée du contexte d'exécution parent ! ! Ceci, comme ceci. This.x représente ici en fait window.x, donc la sortie est 11.

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

De même :

(3)

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

Sortie 11

Situation de la fonction flèche :

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

C'est étrange, n'est-ce pas ? C'est comme ça que je le comprends. C'est lié lorsqu'il est défini dans ES6. La signification spécifique est. que ce qui devrait être hérité est ceci dans le contexte d'exécution parent, et cela ne devrait pas être le contexte d'exécution parent ! ! ! De cette façon, de nombreuses directions peu claires dans les fonctions fléchées sont résolues.

Remarque : les objets simples (non-fonctions) n'ont pas de contexte d'exécution !

Compréhension approfondie de cela dans la fonction flèche

Dans la fonction flèche, la fixation de ce point n'est pas parce que de la fonction flèche interne Il existe un mécanisme pour lier this. La vraie raison est que la fonction flèche n'a pas du tout son propre this, donc le this interne est le this du bloc de code externe. C’est précisément parce qu’il ne possède pas cela qu’il ne peut pas être utilisé comme constructeur.

Nous pouvons simuler la conversion de la fonction flèche dans ES5 :

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

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

Ainsi, lors de la définition d'un objet, définissez les propriétés de l'objet, et cela à l'intérieur pointe vers est généralement global, ou ceci dans l'environnement où se trouve l'objet.

Recommandations associées :

Analyse de l'utilisation des fonctions fléchées dans ReactJs

Introduction à l'utilisation des fonctions fléchées JavaScript

Exemples de code qui expliquent la différence et l'utilisation des fonctions ordinaires et des fonctions fléchées en JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!