Це викривлена функція
Спочатку вивчіть цю функцію з двома параметрами…
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
Прокляті функції здатні дивувати речі. Нижче ми бачимо, що $визначена функція curried з двома параметрами, але на сайті виклику здається, що ми можемо надати будь-яку кількість аргументів. Каррінг це абстракція арность -
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
Часткове застосування
Часткове застосування - це споріднене поняття. Це дозволяє нам частково застосовувати функції, подібні до currying, за винятком того, що функцію не потрібно визначати у витриманому вигляді -
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">
