Parlons des modèles de décoration de fonctions courants en JavaScript

La décoration de fonction est un modèle de conception qui modifie le comportement d'une fonction en y ajoutant du code supplémentaire. En JavaScript, vous pouvez utiliser la décoration de fonction pour effectuer certaines opérations lorsqu'une fonction est appelée, telles que la validation des paramètres d'entrée, la modification des valeurs de retour ou la mise en cache des résultats de calcul d'une fonction, etc. Cet article vous aidera à mieux comprendre et appliquer cette technologie en introduisant des modèles de décoration de fonctions courants en JavaScript.

1. Modèle de décorateur

Le modèle de décorateur est un modèle de conception structurelle qui permet aux objets d'ajouter dynamiquement de nouvelles fonctions ou de nouveaux comportements au moment de l'exécution. En JavaScript, une fonction est aussi un objet, nous pouvons donc utiliser le modèle décorateur pour décorer des fonctions.

L'exemple suivant montre comment utiliser le modèle décorateur pour ajouter une fonctionnalité de validation d'entrée :

function validateInput(fn) {
  return function(...args) {
    for(let arg of args) {
      if(typeof arg !== 'number') {
        throw new Error('Invalid input, input should be a number');
      }
    }
    return fn(...args);
  }
}

function addNumbers(a, b) {
  return a + b;
}

const addNumbersWithValidation = validateInput(addNumbers);

console.log(addNumbersWithValidation(1, 2)); //output: 3
console.log(addNumbersWithValidation('1', 2)); //throws Error: Invalid input, input should be a number

Dans l'exemple ci-dessus, nous avons défini une fonction appelée validateInput qui reçoit une fonction en paramètre et renvoie une nouvelle fonction. . Cette nouvelle fonction vérifiera d'abord si le paramètre d'entrée est un nombre, et si c'est le cas, elle appellera la fonction d'origine, sinon elle générera une erreur. validateInput的函数，它接收一个函数作为参数，返回一个新的函数。这个新的函数会先验证输入参数是否为数字，如果是数字则调用原始函数，否则抛出一个错误。

最后，我们用validateInput装饰了addNumbers函数，创建了一个新的函数addNumbersWithValidation，并使用它来加法两个数字。当输入参数为字符串和数字的时候，我们可以看到addNumbersWithValidation的行为和原始的addNumbers不同，因为它会对输入参数进行验证。

使用装饰器模式时，需要注意以下几点：

• 装饰器函数 should 返回一个新的函数。
• 新的函数 should 接受与原始函数同样的参数，并且在调用原始函数之前或之后执行一些额外的操作。
• 装饰器函数可以被组合。例如，我们可以编写一个装饰器来进行输入验证，再编写另一个装饰器来进行输出缓存。

二、高阶函数

在JavaScript中，函数是一等公民，这意味着我们可以像对待普通变量一样对待函数。高阶函数是那些接收一个或多个函数作为参数，并且返回一个新的函数的函数。使用高阶函数可以让我们更加灵活地处理函数，具有更高的可读性和可复用性。

下面的例子展示了一个简单的高阶函数：

function higherOrderFunction(a, b, callback) {
  const result = callback(a, b);
  console.log(`The result is ${result}`);
}

function add(a, b) {
  return a + b;
}

higherOrderFunction(1, 2, add); //output: The result is 3

在上面的例子中，我们定义了一个名为higherOrderFunction的函数，它接收两个数字和一个回调函数作为参数。在higherOrderFunction函数内部，我们调用了回调函数，将它的返回值输出到控制台。

最后，我们使用add函数来进行操作，并将它作为回调函数传递给了higherOrderFunction。在higherOrderFunction内部，我们将add调用的结果输出到控制台上。

总之，高阶函数是一种强大的工具，可以让我们更加灵活地处理函数和变量，并提供更高的可读性和可复用性。

三、函数柯里化

函数柯里化是一种通过将多参数函数转换为一系列单参数函数来实现的技术。这样，我们可以在每个单参数函数中存储一部分参数，并使用这些部分参数来调用原始函数。函数柯里化可以使代码更加简洁和可读，并且自然地支持函数复合和函数组合等抽象操作。

下面的示例展示了如何使用柯里化来将多个参数拆分为多个步骤：

function add(a) {
  return function(b) {
    return function(c) {
      return a + b + c;
    }
  }
}

console.log(add(1)(2)(3)); //output: 6

在上面的例子中，我们定义了一个接收一个参数并返回一个函数的函数。调用返回的函数之后也返回一个函数。最后，最内层函数直接将所有参数添加到一起并返回相应的结果。

在使用函数柯里化时，需要注意以下几点：

• 每个单参数函数都应该只接收一个参数。
• 每个单参数函数 should 返回另一个函数，或者最终返回一些值。
• 函数柯里化可以使用bind方法来进行实现。例如，const add10 = add.bind(null, 10)可以用来创建一个add10函数，它将10作为第一个参数传递给add
Enfin, nous avons décoré la fonction addNumbers avec validateInput, créé une nouvelle fonction addNumbersWithValidation et l'avons utilisée pour ajouter deux nombres. Lorsque les paramètres d'entrée sont des chaînes et des nombres, nous pouvons voir que le comportement de addNumbersWithValidation est différent de celui d'origine addNumbers car il valide les paramètres d'entrée.

Lorsque vous utilisez le modèle décorateur, vous devez faire attention aux points suivants :

• La fonction décorateur doit renvoyer une nouvelle fonction.

• La nouvelle fonction doit accepter les mêmes paramètres que la fonction d'origine et effectuer quelques opérations supplémentaires avant ou après l'appel de la fonction d'origine.
• Les fonctions du décorateur peuvent être composées. Par exemple, nous pourrions écrire un décorateur pour la validation des entrées et un autre pour la mise en cache des sorties. 🎜🎜🎜2. Fonctions d'ordre supérieur 🎜🎜En JavaScript, les fonctions sont des citoyens de première classe, ce qui signifie que nous pouvons traiter les fonctions comme des variables ordinaires. Les fonctions d'ordre supérieur sont celles qui reçoivent une ou plusieurs fonctions comme arguments et renvoient une nouvelle fonction. L'utilisation de fonctions d'ordre supérieur nous permet de gérer les fonctions de manière plus flexible, avec une lisibilité et une réutilisation plus élevées. 🎜🎜L'exemple suivant montre une simple fonction d'ordre supérieur : 🎜rrreee🎜Dans l'exemple ci-dessus, nous avons défini une fonction nommée higherOrderFunction qui reçoit deux nombres et une fonction de rappel en paramètre. Dans la fonction higherOrderFunction, nous appelons la fonction de rappel et envoyons sa valeur de retour à la console. 🎜🎜Enfin, nous utilisons la fonction add pour l'opérer et la transmettre à la higherOrderFunction comme fonction de rappel. Dans higherOrderFunction, nous affichons les résultats de l'appel add à la console. 🎜🎜En bref, les fonctions d'ordre supérieur sont un outil puissant qui nous permet de gérer les fonctions et les variables de manière plus flexible, et offre une meilleure lisibilité et réutilisabilité. 🎜🎜3. Currying de fonctions🎜🎜Le currying de fonctions est une technique mise en œuvre en convertissant une fonction multi-paramètres en une série de fonctions à paramètre unique. De cette façon, nous pouvons stocker une partie des arguments dans chaque fonction à argument unique et utiliser ces parties pour appeler la fonction d'origine. Le currying de fonctions peut rendre le code plus concis et plus lisible, et prend naturellement en charge les opérations abstraites telles que la composition de fonctions et la composition de fonctions. 🎜🎜L'exemple suivant montre comment utiliser le curry pour diviser plusieurs paramètres en plusieurs étapes : 🎜rrreee🎜Dans l'exemple ci-dessus, nous avons défini une fonction qui prend un paramètre et renvoie une fonction. L’appel de la fonction renvoyée renvoie également une fonction. Enfin, la fonction la plus interne additionne directement tous les paramètres et renvoie le résultat correspondant. 🎜🎜Lorsque vous utilisez le currying de fonctions, vous devez faire attention aux points suivants : 🎜
  • Chaque fonction à paramètre unique ne doit recevoir qu'un seul paramètre. 🎜
  • Chaque fonction à argument unique doit renvoyer une autre fonction, ou finalement une valeur. 🎜
  • Le currying de fonctions peut être implémenté à l'aide de la méthode bind. Par exemple, const add10 = add.bind(null, 10) peut être utilisé pour créer une fonction add10 qui passe 10 comme premier argument à addfonction. 🎜🎜🎜4. Conclusion🎜🎜En utilisant le modèle de décorateur, les fonctions d'ordre supérieur et le curry de fonctions, nous pouvons traiter et combiner les fonctions de manière plus flexible et implémenter certaines fonctions avancées, telles que la validation des entrées, la mise en cache des résultats, la combinaison de fonctions, etc. . Ces techniques sont très courantes en JavaScript, elles méritent donc d'être apprises et maîtrisées en profondeur. 🎜

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!