La position actuelle:Accueil du site>Utilisation des fonctions fléchées es6

Utilisation des fonctions fléchées es6

2022-07-23 22:31:20【InfoQ】

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

Mentions de copyright
Auteur de cet article [InfoQ],Réimpression s’il vous plaît apporter le lien vers l’original, merci
https://fra.chowdera.com/2022/204/202207232229161245.html

Recommandé par sidebar

Devinez que vous aimez

Recommandé au hasard