ホームページ > 記事 > ウェブフロントエンド > JavaScript の一般的な関数装飾パターンについて話しましょう
関数デコレーションは、関数内に追加のコードを追加することで関数の動作を変更するデザイン パターンです。 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
という名前の関数を定義します。関数をパラメータとして受け取り、新しい関数を返します。この新しい関数は、まず入力パラメータが数値であるかどうかを確認し、数値である場合は元の関数を呼び出します。そうでない場合は、エラーがスローされます。
最後に、addNumbers
関数を validateInput
で修飾し、新しい関数 addNumbersWithValidation
を作成し、それを使用して 2 つの数値を加算します。入力パラメーターが文字列と数値の場合、addNumbersWithValidation
の動作は、入力パラメーターを検証するため、元の addNumbers
とは異なることがわかります。
デコレータ パターンを使用する場合は、次の点に注意する必要があります。
2. 高階関数
JavaScript では、関数は第一級市民であり、関数を通常の変数のように扱うことができます。高階関数は、1 つ以上の関数を引数として受け取り、新しい関数を返す関数です。高階関数を使用すると、可読性と再利用性が向上し、より柔軟に関数を扱うことができます。
次の例は、単純な高階関数を示しています。
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
上の例では、2 つの数値と 1 つのコールバック関数を受け取る higherOrderFunction
という名前の関数を定義しました。パラメータとして。 higherOrderFunction
関数内でコールバック関数を呼び出し、その戻り値をコンソールに出力します。
最後に、add
関数を使用して操作し、コールバック関数として higherOrderFunction
に渡します。 higherOrderFunction
内で、add
呼び出しの結果をコンソールに出力します。
つまり、高階関数は、関数や変数をより柔軟に扱い、より高い可読性と再利用性を提供する強力なツールです。
3. 関数カリー化
関数カリー化は、複数パラメーター関数を一連の単一パラメーター関数に変換することによって実現される手法です。このようにして、パラメータの一部を各単一引数関数に保存し、これらの部分引数を使用して元の関数を呼び出すことができます。関数カリー化により、コードがより簡潔で読みやすくなり、関数合成や関数合成などの抽象操作が自然にサポートされます。
次の例は、カリー化を使用して複数のパラメーターを複数のステップに分割する方法を示しています。
function add(a) { return function(b) { return function(c) { return a + b + c; } } } console.log(add(1)(2)(3)); //output: 6
上の例では、1 つのパラメーターを受け取り、関数の関数を返すメソッドを定義します。返された関数を呼び出すと、関数も返されます。最後に、最も内側の関数はすべてのパラメーターを直接加算し、対応する結果を返します。
関数カリー化を使用する場合は、次の点に注意する必要があります。
bind
メソッドを使用して実装できます。たとえば、const add10 = add.bind(null, 10)
を使用して、最初の引数として 10 を add
関数に渡す add10
関数を作成できます。 。 4. 結論
デコレータ パターン、高階関数、関数カリー化を使用することで、関数をより柔軟に処理および結合し、Validate などの高度な関数を実装できます。入力、結果のキャッシュ、関数の結合など。これらのテクニックは JavaScript では非常に一般的なものであるため、徹底的に学びマスターする価値があります。
以上がJavaScript の一般的な関数装飾パターンについて話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。