Comment l'utiliser dans les fonctions fléchées ES6

Cette fois je vais vous montrer comment utiliser ceci dans la fonction flèche ES6 , quelles sont les précautions pour l'utiliser dans la fonction flèche ES6, voici des cas pratiques, 1 Levez-vous et jetez un œ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) La fonction générale 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=11function test1(){  this.a=22;  let b=function(){
    console.log(this.a);
  };
  b();
}var x=new test1();
输出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 bizarre, n'est-ce pas C'est ainsi que je le comprends. La signification spécifique de la liaison this lorsqu'elle est définie dans ES6 doit en être héritée 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 les fonctions fléchées

Dans les fonctions fléchées, le point de ceci est fixe, non pas parce qu'il existe un mécanisme pour le lier à l'intérieur de la fonction flèche. La raison réelle est. que la fonction de flèche n'a pas elle-même du tout. Cela fait que le this interne est celui 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 conversion de la fonction flèche dans ES5 :

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

Ainsi, lors de la définition d'un objet, définissez l'attribut

de l'objet , et celui-ci pointe généralement vers Globalement, ou ceci dans l'environnement où se trouve cet objet.

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

Lecture connexe :

Résumé de l'expérience d'utilisation de Python Django en développement

Chargement de la syntaxe du module ES6, import, export

Comment utiliser getBoundingClientRect() pour réaliser la fixation par défilement du conteneur div

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!