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 numberDans 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不同，因为它会对输入参数进行验证。
使用装饰器模式时，需要注意以下几点：
二、高阶函数
在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在上面的例子中，我们定义了一个接收一个参数并返回一个函数的函数。调用返回的函数之后也返回一个函数。最后，最内层函数直接将所有参数添加到一起并返回相应的结果。
在使用函数柯里化时，需要注意以下几点：
bind方法来进行实现。例如，const add10 = add.bind(null, 10)可以用来创建一个add10函数，它将10作为第一个参数传递给add
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 :
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 : 🎜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!
Comment exporter Apipost hors ligne
méthode de réglage chinois vscode
Méthodes de codage courantes
Combien de personnes pouvez-vous élever sur Douyin ?
Comment résoudre Autorisation refusée
Comment acheter et vendre du Bitcoin en Chine
Comment résoudre le problème de l'absence du fichier msxml6.dll
Comment utiliser fprintf dans matlab
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
