高次関数

2469 ワード
テキストリンク
JavaScriptは関数を返すことを許可します
const func = () => {
  return () => {
    console.log("hello");
  };
};

const innerFunc = func();
innerFunc() //hello
func関数を呼び出して関数を返します.

! しかし、helloではなく、別の値を交換したい場合は、どうすればいいのでしょうか。


:パラメータ化!

const func = (message)=>{
  return()=>{
    console.log(message)
  }
}

const innerFunc1=func("love")
const innerFunc2=func("javascript")

innerFunc1() //love
innerFunc2() //javascript
func関数を実行したら、func関数のコンソールにパラメータを入れます.logの関数が返されます
渡すだけなので実行しないのでconsole.logを出力するにはinnerFunc関数を実行するだけです

関数の本文に値がある場合、すぐに戻ります。


省略可能

以前

const func = (message)=>{
  return()=>{
    console.log(message)
  }
}

後。

const func = (message) => () => {
  console.log(message);
};
意味:メッセージという名前のパラメータを使用して関数を返します.その関数は()=>{console.log(message)}です.

だからどんな場合に使えますか?


これまで作成された小さなプロジェクトは重複データを除去しやすいが、実際の操作では、すべての内部コードが同じ関数よりも多く似ており、特定の部分だけが異なる関数を持っている.
(使いやすい例)計算機を作成したとします.
委任イベントはまだ学習されていないため、各演算子ボタンにはイベントリスナーが登録されています.高次関数を利用しないと,関数の重複を避けることは難しい.
const onClickOperator=(op)=>()=>{
  if(numberOne){
    operator=op;
    $operator.value=op;
  }else {
    alert('숫자를 먼저 입력하세요')
  }
}

document.querySelector("#plus").addEventListener("click",onClickOperator('+'))
document.querySelector("#minus").addEventListener("click",onClickOperator('-'))
document.querySelector("#multiply").addEventListener("click",onClickOperator('*'))
document.querySelector("#divide").addEventListener("click",onClickOperator('/'))
  • では、高次関数が必要な場合、関数の後ろに括弧を付けると、関数はすぐに実行され、(op)=>後ろの部分関数が返されます.
    • したがって、
  • は、実際にクリックすると、初めてイベントリスナーに登録されたときに返される関数が、登録されたパラメータとともに呼び出される.

    • check !

    const hof = (a) => (b) => (c) => {
  return a + b * c;
};

const first = hof(3);
const second = first(4);
const third = second(5);
console.log(third);
  • hof(3)戻り(b)=>(c)=>{return a+b+c}
  • first(4)戻り(c)=>{return a+b+c}
  • second(5)はa+b*c
    • を返す

    ソース


    Let's get it JavaScriptプログラミング
    明日勉強キャンプD+9
    Rubyコーディングスタイルの現状とStandard gemのご紹介