Utilisation des fonctions fléchées es6

Préface

La fonction flèche est

ES6

Une nouvelle représentation de la fonction,Ça a l'air très simple aussi,J'ai souvent utilisé,Mais il n'y a pas d'apprentissage global,J'ai eu une surprise aujourd'hui.,Décidez d'en apprendre davantage sur les fonctions fléchées

On y va.

On écrivait comme ça quand on écrivait des fonctions

function fun() {
   return 100;
}

console.log(fun());     //100

C'est écrit comme ça

const fun = function() {
   return 100;
}

console.log(fun());     //100

InES6Moyenne,Nous avons simplifié le Code

const fun1 = () => {
   return 100;
}
console.log(fun1());     //100

Simplifier à nouveau

const fun2 = x => x;
console.log(fun2(100));     //100

• ()Définir les paramètres dans,S'il n'y a qu'un seul paramètre,()Peut être omis

• {}Corps de la fonction d'écriture moyenne,Si vous n'avez que des valeurs de retour dans le corps de la fonction,Peut ne pas écrirereturn

La différence entre une fonction fléchée et une fonction normale

Par exemple,

let obj = {
   name: 'Xiao Ming',
   age: 3,
   sayName() {
       setTimeout(function() {
           console.log("Je suis" + this.name);
       }, 500)
   }
}
obj.sayName();

Après l'exécution de ce code ,C'est imprimé. 

Je suisundefined

 ,Alors pourquoi?“Xiao Ming” Ça ne peut pas être imprimé ？

let obj = {
   name: 'Xiao Ming',
   age: 3,
   sayName() {
       setTimeout(function() {
           console.log(this);
       }, 500)
   }
}
obj.sayName();

Alors on imprime this,Le résultat imprimé estwindowObjet,Donc çathisC'est ça.windowObjet,C'est - à - dire l'objet global. Parce que le Code ici est sayName Il y a une fonction dans la fonction , À l'intérieur de la fonction this Impossible de pointer

Xiao Ming

,MaissayNameFonctionthis Ça peut signifier

Xiao Ming

,La solution est desayName Une variable est définie dans la fonction ,La valeur est:this, Les fonctions internes pointent ensuite vers

Xiao Ming

,Les codes sont les suivants:

let obj = {
   name: 'Xiao Ming',
   age: 3,
   sayName() {
       let self = this;
       setTimeout(function() {
           console.log("Je suis" + self.name);
       }, 500)
   }
}
obj.sayName();

Pour pouvoir imprimer

C'est Xiao Ming.

C'est

Utiliser les fonctions fléchées

Regardez cette chaîne de codes qui utilisent des fonctions fléchées

let obj = {
   name: 'Xiao Ming',
   age: 3,
   sayName() {
       setTimeout(() => {
           console.log("Je suis" + this.name);
       }, 500)
   }
}
obj.sayName();

Le résultat imprimé est 

C'est Xiao Ming.

Je pense que vous et moi avons le même doute ： Pourquoi est - ce possible avec les fonctions fléchées ？

La différence entre une fonction fléchée et une fonction normale

• thisDirection différente
• Fonction normale：Qui appelle cette fonction,
  this
  À qui?
• Fonctions fléchées： Où définir la fonction ,
  this
  À qui?

Queue de tranche

Hee - Hee - hee, C'est tout ce que Xiaobai a utilisé pour le moment （ En fait, c'est tout ce que j'aurais ）, Je vais continuer à mettre à jour ce blog