Maison  >  Article  >  interface Web  >  Analyse détaillée des fonctions de rappel javascript (tutoriel graphique)

Analyse détaillée des fonctions de rappel javascript (tutoriel graphique)

亚连
亚连original
2018-05-18 17:09:321593parcourir

Cet article présente principalement les points de connaissance pertinents des fonctions de rappel javascript et l'analyse des exemples de code d'utilisation. Les amis dans le besoin peuvent en tirer des leçons.

À une époque où les langages de haut niveau émergent les uns après les autres, chaque langage prétend avoir le fier dicton selon lequel tout est objet, mais en tant que langage de script, js est très différent de l'objet traditionnel- langages orientés comme Java. En plus du système d'héritage étrange de js, l'une des fonctionnalités les plus fascinantes est la fonction de rappel. Bien sûr, beaucoup de gens la critiquent. deux fonctionnalités les plus importantes du langage js. Bien sûr, tout comme tous les avantages dont vous avez besoin pour répondre à vos propres besoins, il n'y a pas de solution miracle dans ce monde. Par exemple, l'utilisation d'un grand nombre de fonctions de rappel rendra votre code redondant. désordonné, affectant l'expérience visuelle et mentale des codeurs.

Cet article est ma propre revue des fonctions de rappel d'apprentissage. Mon expérience est inévitablement imparfaite, voire fausse. Pardonnez mon ignorance. Je suis prêt à apprendre avec un esprit ouvert et. m'améliorer.

La chose la plus unique à propos de JavaScript est que les fonctions sont des citoyens de première classe. Je préfère appeler js everything Un langage de haut niveau pour les variables. Les fonctions sont également des variables qui peuvent devenir des paramètres d'autres fonctions. .Nous aimons les appeler fonctions de rappel dans js. De plus, les fonctions anonymes dans js peuvent être utilisées comme paramètres de fonction, ce qui rend les fonctions de rappel faciles à écrire

ps. le langage C --- pointeur pointeur !!! Les choses importantes doivent être dites trois fois

Regardons d'abord la définition de la fonction de rappel

En programmation informatique, un rappel est un morceau de code exécutable qui est passé en argument à un autre code, qui est censé rappeler (exécuter) l'argument à un moment opportun

La fonction de rappel est un morceau de code exécutable Segment de code, qui est passé en tant que un paramètre vers un autre code, sa fonction est de faciliter l'appel de ce morceau de code (fonction de rappel) en cas de besoin.

Fonction de rappel

  function addSqua(num1, num2, callback){
    var sum = num1 + num2;
    return callback(sum);
  }
  
  function squa(num){
    return num*num;
  }
  
  let num = addSqua(1, 2, squa);    
  console.log(num);
  //=>9

Fonction de rappel anonyme

Passez la fonction anonyme directement à la fonction en tant que paramètre de fonction, ce que nous faisons généralement utiliser en programmation

function addSqua(num1, num2, callback){
 var sum = num1 + num2;
 return callback(sum);
}
let num = addSqua(1, 2, function squa(num){
 return num*num;
});    
console.log(num); 
//=9

Imiter chaque méthode dans le tableau

Ajouter une méthode similaire à chaque dans Array.prototype

  Array.prototype.myEvery = function (callback) {
   if (typeof callback === 'function') {
    for (let i = 0; i < this.length; i++) {
     if (callback(this[i])) {
      return false;
     }   
    }
    return true;
   }
   return true;
  }
  
  let op = [3, 6, &#39;every&#39;, 9,&#39;each&#39;];
  op.myEvery(function (value) {
   console.log(value);
  })
  // 3
  // 6
  // &#39;every&#39;
  // 9
  // &#39;each&#39;

Caractéristiques de la fonction de rappel

  1. ne sera pas exécutée immédiatement Comme indiqué dans la définition, la fonction de rappel en tant que fragment de code peut être exécutée dans ses conditions spécifiques selon les besoins. , avec la fonction de rappel en paramètre Lorsqu'elle est transmise à une fonction, seule la définition de la fonction est transmise et n'est pas exécutée immédiatement.

  2. ici, ES6 a introduit les fonctions fléchées. L'introduction des fonctions fléchées nécessite une attention particulière lors de l'écriture des fonctions de rappel, c'est l'objet contextuel pointant vers la fonction. Il faut faire attention à l'utilisation de ceci. Ceci dans la fonction flèche n'a aucune relation contextuelle. Si vous êtes intéressé, vous pouvez consulter ES6 Ruan Yifeng, qui présente une fois de plus les avantages et les scénarios d'utilisation du portail

fonction de rappel C'est une fermeture

La fonction de rappel est une simple utilisation de la fermeture, ce qui signifie qu'elle peut accéder aux variables définies dans sa couche externe.

La beauté des fonctions de rappel

  • DRY pour éviter la duplication de code.

  • peut faire abstraction de la logique commune.

  • Séparation de la logique métier (c'est tellement beau ^-^ ^-^)

  • Améliorer la maintenabilité et la lisibilité du code.

  • Améliorez la lisibilité du code.

  • Fonctions dédiées séparées.

L'avantage de la fonction de rappel js est que les autres langages traditionnels ne l'ont pas. Elle peut réaliser la séparation de la logique métier, ce qui équivaut à exposer une interface à l'extérieur. monde. Ceci est très similaire à la séparation du concept de conception d'interface API dans l'architecture

Il n'y a pas de « solution miracle » dans ce monde, et il n'y a pas de solution unique qui puisse tout résoudre. Puisque js est né pour l'asynchrone, les fonctions de rappel sont les plus utilisées et sont également les plus adaptées. Le problème est la programmation asynchrone. Cependant, une utilisation intensive rendra le code du programmeur redondant, avec un grand nombre de lignes illisibles, et l'expérience est extrêmement. pauvre. C'est simplement une chose joyeuse. Les gens n'ont jamais cessé de rechercher leur propre confort.

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

Articles connexes :

Comment implémenter le code de vérification de puzzle coulissant en JS

vuejs中v -Explication détaillée de l'utilisation de if et v-show

Explication détaillée des étapes pour implémenter l'arbre rouge-noir avec JS

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn