함수 장식은 함수 내부에 추가 코드를 추가하여 함수의 동작을 변경하는 디자인 패턴입니다. JavaScript에서는 함수 장식을 사용하여 함수 호출 시 입력 매개변수 유효성 검사, 반환 값 수정, 함수 계산 결과 캐싱 등과 같은 일부 작업을 수행할 수 있습니다. 이 글은 JavaScript의 일반적인 함수 장식 패턴을 소개하여 이 기술을 더 잘 이해하고 적용하는 데 도움이 될 것입니다.
1. 데코레이터 패턴
데코레이터 패턴은 객체가 런타임에 새로운 기능이나 동작을 동적으로 추가할 수 있도록 하는 구조적 디자인 패턴입니다. JavaScript에서는 함수도 객체이므로 데코레이터 패턴을 사용하여 함수를 꾸밀 수 있습니다.
다음 예에서는 데코레이터 패턴을 사용하여 입력 유효성 검사 기능을 추가하는 방법을 보여줍니다.
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위 예에서는 함수를 매개변수로 받고 새 함수를 반환하는 validateInput라는 함수를 정의했습니다. . 이 새로운 함수는 먼저 입력 매개변수가 숫자인지 확인하고 숫자인 경우 원래 함수를 호출합니다. 그렇지 않으면 오류가 발생합니다. 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 함수를 validateInput으로 장식하고 새 함수 addNumbersWithValidation를 만든 다음 이를 사용하여 두 개의 숫자를 추가했습니다. 입력 매개변수가 문자열과 숫자인 경우 addNumbersWithValidation의 동작이 입력 매개변수의 유효성을 검사하기 때문에 원래 addNumbers와 다르다는 것을 알 수 있습니다. 데코레이터 패턴을 사용할 때 다음 사항에 주의해야 합니다.
higherOrderFunction이라는 함수를 정의했습니다. higherOrderFunction 함수 내에서 콜백 함수를 호출하고 해당 반환 값을 콘솔에 출력합니다. 🎜🎜마지막으로 add 함수를 사용하여 이를 작동하고 콜백 함수로 higherOrderFunction에 전달합니다. higherOrderFunction 내에서 add 호출 결과를 콘솔에 출력합니다. 🎜🎜간단히 말하면, 고차 함수는 함수와 변수를 보다 유연하게 처리하고 더 높은 가독성과 재사용성을 제공할 수 있는 강력한 도구입니다. 🎜🎜3. 함수 커링🎜🎜함수 커링은 다중 매개변수 함수를 일련의 단일 매개변수 함수로 변환하여 구현하는 기술입니다. 이런 방식으로 각 단일 인수 함수에 매개변수의 일부를 저장하고 이러한 부분 인수를 사용하여 원래 함수를 호출할 수 있습니다. 함수 커링을 사용하면 코드를 더욱 간결하고 읽기 쉽게 만들 수 있으며 함수 합성, 함수 합성과 같은 추상적인 작업을 자연스럽게 지원합니다. 🎜🎜다음 예에서는 커링을 사용하여 여러 매개변수를 여러 단계로 분할하는 방법을 보여줍니다. 🎜rrreee🎜위 예에서는 하나의 매개변수를 취하고 함수를 반환하는 함수를 정의했습니다. 반환된 함수를 호출하면 함수도 반환됩니다. 마지막으로 가장 안쪽 함수는 모든 매개변수를 직접 더하고 해당 결과를 반환합니다. 🎜🎜함수 커링을 사용할 때 다음 사항에 주의해야 합니다. 🎜bind 메소드를 사용하여 구현할 수 있습니다. 예를 들어, const add10 = add.bind(null, 10)을 사용하면 add에 대한 첫 번째 인수로 10을 전달하는 add10 함수를 만들 수 있습니다. 코드>함수. 🎜🎜🎜4. 결론🎜🎜데코레이터 패턴, 고차 함수 및 함수 커링을 사용하면 함수를 보다 유연하게 처리하고 결합할 수 있으며 입력 유효성 검사, 결과 캐싱, 함수 결합 등과 같은 일부 고급 기능을 구현할 수 있습니다. . 이러한 기술은 JavaScript에서 매우 일반적이므로 깊이 배우고 숙달할 가치가 있습니다. 🎜위 내용은 JavaScript의 일반적인 함수 장식 패턴에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
