JSの高階関数5つを共有する

1. はじめに

JavaScript では、関数は実際にはデータであるため、関数を変数に割り当てることもできます。この記事では、JavaScript における高階関数のいくつかの使用法を紹介します。

2. 再帰

いわゆる再帰とは、関数が自分自身を呼び出すことを指します。物語で言えば、昔々、山がありました。山にはお寺があり、お寺には若い僧侶に物語を語っている年老いた僧侶がいました。物語は何ですか？「昔々、山がありました。山にはお寺がありました。お寺には年老いた僧侶がいて、若い僧侶に物語を語っていました。その物語は何でしたか？」「昔々、山がありました。山にはお寺がありました。お寺には年老いた僧侶がいて、若い僧侶に物語を語っていました。その物語は何でしたか？」

ある意味では、再帰はループに似ています。どちらも同じコードを繰り返し実行し、無限ループや無限再帰を回避するために終了条件を必要とします。

再帰に必要な条件は次のとおりです。

サブ問題は元の問題と同じですが、より単純です
出口があるはずだ

JavaScript で再帰呼び出しを行う方法は 2 つあります。

関数名を使用することで
これは、arguments.callee プロパティを使用して行われます。

次のコードは単純な再帰を示しています。

var v = 1 // 終了条件関数 fun() {
  console.log('first' + v + 'second function call')
  v++
  (v <= 3) の場合 {
    楽しい（）
  }
}
楽しい（）

実行結果は次のとおりです

関数の最初の呼び出し関数の2番目の呼び出し関数の3番目の呼び出し

3. コールバック関数

関数は変数に割り当てることができるデータと同じなので、他のデータと同様に定義、削除、コピーしたり、他の関数に引数として渡したりすることができます。

関数が別の関数に引数として渡される場合、引数として渡される関数はコールバック関数と呼ばれます。コールバック関数を使用する関数はターゲット関数（外側の関数）と呼ばれる

サンプルコードは次のとおりです。

// 2 つの関数型パラメータを持つ関数を定義し、2 つの関数を個別に実行してその合計を返します。
関数 sum(a, b) {
  // 対象関数は a() + b() を返す
}

関数 1() {
  // コールバック関数は1を返す
}

関数2() {
  // コールバック関数 return 2
}

console.log(合計(1, 2)) // 3

コード実行プロセスは次のとおりです。

sum関数を実行すると、2つの実パラメータが渡されます。sum sumでは、2つの実パラメータが関数として実行され、戻り値が計算されて返されます。

3.1 匿名コールバック関数

いわゆる匿名コールバック関数は、ターゲット関数のパラメータが名前のない関数である関数です。匿名コールバック関数を使用するように前のコードを変更します。

// 2 つの関数型パラメータを持つ関数を定義し、2 つの関数を個別に実行してその合計を返します。
関数 sum(a, b) {
  // 対象関数は a() + b() を返す
}

コンソール.log(
  和（
    関数 （） {
      // 匿名コールバック関数は 1 を返します
    },
    関数 （） {
      // 匿名コールバック関数 return 2
    },
  ）、
） // 3

3.2 パラメータ付きコールバック関数

コールバック関数はパラメータを追加できます。サンプルコードは次のとおりです。

関数 multiplyByTwo(リスト、コールバック) {
  リスト.forEach(関数(v, i) {
    コールバック(v * 2, i)
  })
}
var リスト = [1, 2, 3]
2乗で乗算(リスト、関数(v、i) {
  リスト[i] = v
})
console.log(リスト) // [ 2, 4, 6 ]

3.3 コールバック関数の利点と欠点

匿名コールバック関数はグローバル名前空間を保存する
プライベートデータコンテンツを指定された場所に公開して使用する
カプセル化が保証されています - プライベートなデータを使用できますが、ソースは不明です
パフォーマンスの向上に役立ちます

しかし、コールバック関数にも欠点があります。対象関数のパラメータがコールバック関数であり、そのコールバック関数のパラメータが別のコールバック関数であり、その別のコールバック関数のパラメータもコールバック関数である場合...つまり、入れ子人形となり、コールバックトラップが形成されます。さらに深刻な場合は、コールバック地獄と呼ばれることもあります。

4. セルフチューニング機能

いわゆるセルフチューニング関数は、定義後すぐに呼び出される関数です。サンプルコードは以下のとおりです。

;（関数 （） {
  console.log('セルフチューニング機能')
})()

この構文は少し難しそうに見えますが、実際には何も問題はありません。匿名関数の定義を括弧のペアの内側に配置し、その外側に別の括弧のペアを配置するだけです。

文法構造は以下の図に示されています。

上記の 2 つの方法に加えて、セルフチューニング機能には他の珍しい方法がいくつかあります。サンプルコードは次のとおりです。

;+(関数(v) {
  // 仮パラメータ var w = 100 // ローカル変数 console.log('self-tuning function' + v)
})(1) // パラメータ!(function (v) {
  var w = 100 // ローカル変数 console.log('self-tuning function' + v)
})(2)

~(関数(v) {
  var w = 100 // ローカル変数 console.log('self-tuning function' + v)
})(3)

自己調整型匿名関数を使用する利点は、グローバル変数が作成されないことです。

欠点は、このような関数は繰り返し実行できないことです (ループまたは別の関数内に配置されない限り)。これにより、即時関数は、1 回限りのタスクや初期化タスクを実行するのにも非常に適しています。

5. 価値の機能

ある関数が別の関数の結果として返される場合、結果として返される関数は値としての関数と呼ばれます。

サンプルコードは次のとおりです。

関数outer() {
  変数v = 100
  // 関数本体に別の関数を定義する -> 内部（プライベート）関数 return function () {
    // 無名関数を使用して v * 2 を返す
  }
}
var 結果 = 外側()
console.log(結果) // [関数]

これを行う利点は次のとおりです。

これは、グローバル名前空間が純粋であることを保証するのに役立ちます (つまり、名前の競合の可能性が低くなります)。
プライバシーの確保 - これにより、アプリケーションの他の部分では使用されない独自の機能を保持しながら、必要な機能のみを「外部の世界」に公開するオプションが提供されます。

6. 終了

クロージャは関数で提案された概念です。簡単に言えば、関数定義は関数外で定義された変数を参照し、関数は定義環境外で実行できます。クロージャは、内部関数が外部関数スコープから何らかの方法でアクセスされたときに発生します。

実際、閉包は関数のより一般的な概念として見ることができます。それはもはや従来の意味で定義された関数ではないからです。

閉鎖条件:

内部関数は外部関数内で定義されます。
外部関数には戻り値があり、その戻り値は内部関数です。
内部関数は外部関数の変数も参照します。

クロージャの欠点:

スコープは直感的ではありません。
変数はガベージコレクションされないため、メモリ使用量に一定の問題が生じます。

クロージャの役割:

ピアスコープを使用できます。
他の要素の内部変数を読み取ります。
範囲を拡大します。
グローバル変数の汚染を避ける

閉鎖の原則:

関数の実行は、プリコンパイル段階と実行段階の 2 つの段階に分けることができます。

プリコンパイルフェーズで、内部関数が外部関数の変数を使用していることが判明した場合、メモリ内にクロージャオブジェクトが作成され、対応する値が保存されます。クロージャがすでに存在する場合は、対応するプロパティ値を追加するだけで済みます。
実行が完了すると、関数実行コンテキストは削除され、関数のクロージャオブジェクトへの参照は破棄されますが、その内部関数はクロージャへの参照を保持したままなので、内部関数は外部関数の変数を引き続き使用できます。

クロージャは主にスコープチェーンの特性を利用します。関数内で定義された関数は、関数を含むアクティブオブジェクトを自身のスコープチェーンに追加します。関数が実行されると、その実行スコープチェーンは破棄されますが、内部関数のスコープチェーンは引き続きこのアクティブオブジェクトを参照しているため、内部関数が破棄されるまでアクティブオブジェクトは破棄されません。

クロージャ実装のデモ:

// 1. 返された内部関数を介して関数内のローカル変数を操作する function fun () {
    var v = 100; // ローカル変数 // クロージャを完了するためにオブジェクトを返すことでローカル変数 v にアクセスします return {
        設定: 関数 (x) {
            v = x;
        },
        取得: 関数 () {
            リターンv
        }
    }
}
var 結果 = fun();
結果.set(200)
console.log(result.get()); // 200

// 2. 関数が何回呼び出されたかをカウントするローカル変数を定義する var generate_count = function () {
    var コンテナ = 0;
    関数を返す（）{
        コンテナ++
        console.log(`これは ${container} 番目の呼び出しです`);
    }
}

var 結果 = generate_count();
result(); // これは最初の呼び出しです result(); // これは2番目の呼び出しです result(); // これは3番目の呼び出しです

// 3. Math.pow() 関数を変更して、数値の平方または立方を求めるときに、2 番目のパラメータを毎回渡す必要がないようにします。/*
Math.pow(4, 2) // 4の2乗 Math.pow(4, 3) // 4の3乗 */

// 関数ジェネレータ関数を記述する makePower (power) {
    戻り値 (数値) => {
        Math.pow(数値、べき乗)を返す
    }
}
// 平方 let power2 = makePower(2)
// 立方体 let power3 = makePower(3)
// 4の2乗を計算する console.log(power2(4)) // 16
// 4の3乗を計算する console.log(power3(4)) // 62

要約:

この記事では、JavaScript の 5 つの高階関数、つまり再帰、コールバック関数、自己調整関数、値関数、クロージャの使用と実装について説明します。

JS 高階関数に関するこの記事はこれで終わりです。JS 高階関数に関する関連記事をもっと知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: