JavaScript の一般的な関数装飾パターンについて話しましょう-フロントエンドQ&A-php.cn

JavaScript の一般的な関数装飾パターンについて話しましょう

PHPz

リリース： 2023-04-25 10:09:40

オリジナル

732 人が閲覧しました

関数デコレーションは、関数内に追加のコードを追加することで関数の動作を変更するデザインパターンです。 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 とは異なることがわかります。

デコレータパターンを使用する場合は、次の点に注意する必要があります。

デコレータ関数は新しい関数を返す必要があります。
新しい関数は、元の関数と同じパラメーターを受け入れ、元の関数を呼び出す前または呼び出した後にいくつかの追加の操作を実行する必要があります。
デコレータ関数を構成できます。たとえば、入力検証用に 1 つのデコレータを作成し、出力キャッシュ用に別のデコレータを作成することができます。

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 つのパラメーターを受け取り、関数の関数を返すメソッドを定義します。返された関数を呼び出すと、関数も返されます。最後に、最も内側の関数はすべてのパラメーターを直接加算し、対応する結果を返します。

関数カリー化を使用する場合は、次の点に注意する必要があります。

各単一パラメーター関数は 1 つのパラメーターのみを受け取る必要があります。
すべての単一引数関数は別の関数を返すか、最終的には何らかの値を返す必要があります。
関数のカリー化は、bind メソッドを使用して実装できます。たとえば、const add10 = add.bind(null, 10) を使用して、最初の引数として 10 を add 関数に渡す add10 関数を作成できます。。

4. 結論

デコレータパターン、高階関数、関数カリー化を使用することで、関数をより柔軟に処理および結合し、Validate などの高度な関数を実装できます。入力、結果のキャッシュ、関数の結合など。これらのテクニックは JavaScript では非常に一般的なものであるため、徹底的に学びマスターする価値があります。

以上がJavaScript の一般的な関数装飾パターンについて話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。