Des questions à ce sujet dans les fonctions fléchées ES6 ?

La syntaxe de la fonction flèche est nouvelle dans ES6. La fonction flèche a les caractéristiques de simplicité et de commodité pour l'obtenir. Ensuite, je partagerai avec vous cela dans la fonction flèche ES6 à travers cet article.

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 this dans la fonction flèche : ceci dans la fonction flèche est lié lorsque la fonction est définie, pas lorsque la fonction est définie. La fonction de liaison est exécutée.

(1) Généralement, la fonction vers laquelle cela pointe est liée lors de l'exécution. Lors de l'exécution de obj.say(), 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) 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. 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 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.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Explication détaillée sur l'optimisation des performances des composants React

À propos de la façon d'implémenter element-ui dans la table vue méthode de chargement par défilement de table

Comment implémenter la liste déroulante de sélection via Vue.js, les opérations spécifiques sont les suivantes

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!