それはカレー関数です
まず、この関数を2つのパラメーターで調べます…
const add = (x, y) => x + y
add(2, 3) //=> 5
ここでは再びカレーの形で…
const add = x => y => x + y
これは、矢印関数なしの同じ1コードです…
const add = function (x) {
return function (y) {
return x + y
}
}
焦点を合わせる return
それを別の方法で視覚化すると役立つ場合があります。アロー関数はこのように機能することがわかっています。戻り値に特に注意を払いましょう。
const f = someParam => returnValue
私たちのように、add関数が返す機能を -我々は追加明確にするために括弧を使用することができます。太字のテキストは、私たちの関数の戻り値でありますadd
const add = x => (y => x + y)
つまりadd、ある数の関数は関数を返します
add(2) // returns (y => 2 + y)
カレー関数の呼び出し
したがって、カレー関数を使用するには、少し異なる方法で呼び出す必要があります…
add(2)(3) // returns 5
これは、最初の（外部）関数呼び出しが2番目の（内部）関数を返すためです。2番目の関数を呼び出して初めて、実際に結果が得られます。これは、呼び出しを2行で区切るとより明白になります…
const add2 = add(2) // returns function(y) { return 2 + y }
add2(3) // returns 5
新しい理解をコードに適用する
関連：「バインド、部分適用、カレーの違いは何ですか？」
OK、それがどのように機能するかを理解したので、コードを見てみましょう
handleChange = field => e => {
e.preventDefault()
/// Do something here
}
まず、矢印関数を使用せずにそれを表現することから始めます…
handleChange = function(field) {
return function(e) {
e.preventDefault()
// Do something here
// return ...
};
};
ただし、アロー関数は字句的にバインドするためthis、実際には次のようになります…
handleChange = function(field) {
return function(e) {
e.preventDefault()
// Do something here
// return ...
}.bind(this)
}.bind(this)
たぶん今、これが何をしているのかをより明確に見ることができます。handleChange関数は、指定する関数を作成していますfield。アプリケーションの状態を更新するには、各入力で独自のリスナーをセットアップする必要があるため、これは便利なReact手法です。このhandleChange関数を使用することで、change各フィールドにリスナーを設定することになる重複コードをすべて排除できます。涼しい！
1ここではthis、元のadd関数はコンテキストを使用しないため、字句的にバインドする必要はありませんでした。この場合、それを保持することは重要ではありません。
さらに多くの矢
必要に応じて、2つ以上の矢印関数をシーケンスできます-
const three = a => b => c =>
a + b + c
const four = a => b => c => d =>
a + b + c + d
three (1) (2) (3) // 6
four (1) (2) (3) (4) // 10
カリー化された関数は驚くべきことをすることができます。以下では$、2つのパラメーターを持つカレー関数として定義されていますが、呼び出しサイトでは、任意の数の引数を指定できるように見えます。カリー化はアリティの抽象化です-
const $ = x => k =>
$ (k (x))
const add = x => y =>
x + y
const mult = x => y =>
x * y
$ (1) // 1
(add (2)) // + 2 = 3
(mult (6)) // * 6 = 18
(console.log) // 18
$ (7) // 7
(add (1)) // + 1 = 8
(mult (8)) // * 8 = 64
(mult (2)) // * 2 = 128
(mult (2)) // * 2 = 256
(console.log) // 256
部分適用
部分適用は関連する概念です。関数をカレー形式で定義する必要がないことを除いて、カリーと同様に関数を部分的に適用できます-
const partial = (f, ...a) => (...b) =>
f (...a, ...b)
const add3 = (x, y, z) =>
x + y + z
partial (add3) (1, 2, 3) // 6
partial (add3, 1) (2, 3) // 6
partial (add3, 1, 2) (3) // 6
partial (add3, 1, 2, 3) () // 6
partial (add3, 1, 1, 1, 1) (1, 1, 1, 1, 1) // 3
ここpartialにあなた自身のブラウザで遊ぶことができる実際のデモがあります-
const partial = (f, ...a) => (...b) =>
f (...a, ...b)
const preventDefault = (f, event) =>
( event .preventDefault ()
, f (event)
)
const logKeypress = event =>
console .log (event.which)
document
.querySelector ('input[name=foo]')
.addEventListener ('keydown', partial (preventDefault, logKeypress))
<input name="foo" placeholder="type here to see ascii codes" size="50">
