Maison >interface Web >js tutoriel >Comment créer une fonction qui appelle chaque fonction fournie à l'aide de JavaScript ?

Comment créer une fonction qui appelle chaque fonction fournie à l'aide de JavaScript ?

PHPzavant: 2023-08-24 12:41:021285parcourir

如何使用 JavaScript 创建一个调用每个提供的函数的函数？

En JavaScript, les fonctions sont des objets de première classe, ce qui signifie qu'elles peuvent être transmises comme arguments à d'autres fonctions. Il s'agit d'une fonctionnalité puissante qui peut être utilisée pour créer des modèles intéressants.

L'un de ces modèles est le modèle "invoke-each", dans lequel une fonction est créée qui appelle chaque fonction fournie en utilisant les arguments qu'elle reçoit.

Pourquoi utiliser le modèle Invoke-Each ?

Il existe plusieurs raisons pour lesquelles vous pourriez vouloir utiliser le modèle Invocation-Each.

Premièrement, il peut être utilisé comme un moyen de résumer les détails de la façon dont un ensemble de fonctions est appelé. Ceci est utile si la fonction est appelée de manière complexe ou répétitive.

Deuxièmement, il peut être utilisé pour créer une sorte de "pipeline", où la sortie de chaque fonction est transmise en entrée à la fonction suivante de la chaîne. C’est un moyen pratique d’enchaîner une série d’actions.

Enfin, il peut être utilisé pour créer une fonction "tee" qui appelle plusieurs fonctions avec les mêmes paramètres et collecte les résultats. Ceci est utile pour la journalisation, le débogage ou à d’autres fins.

Comment implémenter le modèle Invoke-Each ?

Il existe plusieurs manières différentes d'implémenter l'appel de chaque modèle.

Le moyen le plus simple consiste simplement à parcourir les fonctions fournies et à appeler chaque fonction avec les arguments -

function invokeEach(functions, args) {
   for (var i = 0; i < functions.length; i++) {
      functions[i].apply(null, args);
   }
}

Dans le code ci-dessus, nous parcourons les fonctions et appelons chaque fonction à l'aide de la méthode Function.prototype.apply(). Cette méthode nous permet d'appeler une fonction avec un tableau de valeurs et de paramètres spécifique.

Nous utilisons ici la méthode apply() car c'est un moyen pratique de transmettre des paramètres sous forme de tableau. Vous pouvez également utiliser la méthode Function.prototype.call(), qui vous permet de transmettre des paramètres sous forme de valeurs distinctes.

Exemple

Exemple de code de travail complet ci-dessous.

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <div id="result1"></div>
   <div id="result2"></div>
   <div id="result3"></div>
   <script>
      function foo(x) {
         document.getElementById("result").innerHTML = 'foo: ' + x;
      }
      function bar(x) {
         document.getElementById("result1").innerHTML = 'bar: ' + x;
      }
      function baz(x) {
         document.getElementById("result2").innerHTML = 'baz: ' + x;
      }
      function qux(x) {
         document.getElementById("result3").innerHTML ='qux: ' + x;
      }
      function invokeEach(functions, args) {
         for (var i = 0; i < functions.length; i++) {
            functions[i].apply(null, args);
         }
      }
      invokeEach([foo, bar, baz, qux], [5]);
   </script>
</body>
</html>

Comme vous pouvez le voir, l'exemple de code ci-dessus définit quatre fonctions : foo(), bar(), baz(), et qux(). Ces fonctions affichent simplement un message en utilisant les arguments fournis.

Ensuite, nous définissons la fonction invokeEach(), qui accepte un tableau de fonctions et un tableau de paramètres. Cette fonction parcourt les fonctions fournies et appelle chaque fonction avec les arguments fournis.

Enfin, nous appelons la fonction invokeEach(), en passant quatre fonctions et un seul paramètre 5. Comme prévu, chaque fonction est appelée avec l'argument 5.

Dans ce didacticiel, nous avons examiné le modèle Invocation-Each en JavaScript. Ce modèle peut être utilisé pour créer une fonction qui appelle chaque fonction fournie avec les arguments qu'elle reçoit.

Nous avons appris comment mettre en œuvre ce modèle et certaines des raisons pour lesquelles vous pourriez vouloir l'utiliser.

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!

JavaScript 循环参数数组值传递 function 对象 this prototype

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Propriété agent.maxSockets dans Node.jsArticle suivant：Propriété agent.maxSockets dans Node.js

Articles Liés

Voir plus