Это функция карри
Сначала рассмотрим эту функцию с двумя параметрами ...
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
Это потому, что первый (внешний) вызов функции возвращает вторую (внутреннюю) функцию. Только после вызова второй функции мы действительно получаем результат. Это станет более очевидным, если мы разделим звонки на две строки ...
const add2 = add(2) // returns function(y) { return 2 + y }
add2(3) // returns 5
Применяя наше новое понимание к вашему коду
связанные с: «В чем разница между связыванием, частичным применением и каррированием?»
Хорошо, теперь, когда мы понимаем, как это работает, давайте посмотрим на ваш код
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функция не использует никакого контекста, поэтому не важно сохранять ее в этом случае.
Еще больше стрел
При необходимости можно упорядочить более двух функций стрелок:
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
Функции карри способны на удивительные вещи. Ниже мы видим $определенную как карри функцию с двумя параметрами, но на сайте вызова она выглядит так, как будто мы можем предоставить любое количество аргументов. Карри - это абстракция арности -
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">
