Où cela pointe-t-il dans les fonctions fléchées ES6 ?

Cette fois, je vais vous montrer où pointe ceci dans la fonction flèche ES6, et quelles sont les précautions lors de son utilisation dans la fonction flèche ES6. Voici un cas pratique, jetons un coup d'œil.

Brève introduction : 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 définit la fonction . Au lieu de lier lors de l'exécution de la fonction.

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

objet de obj.

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

(2) Ce qu'on appelle la 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

Les similaires sont :

(3)

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

Sortie 11

Cas 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 ainsi que je le comprends. Lors de la définition de la signification spécifique de la liaison this dans ES6, ce qui devrait être hérité est-ce dans 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. Précisément parce qu'il n'a pas cela, il ne peut pas être utilisé comme

constructeur .

Nous pouvons simuler la transformation 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 généralement vers le monde global, ou là où l'objet se trouve ceci dans cet environnement.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php. !

Lecture recommandée :

Comment changer le statut de la radio avec JS

Comment définir la table bootstrap sur le pourcentage de hauteur

La différence entre var foo = function () {} et function foo()

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!