그게 카레 기능입니다
먼저이 기능을 두 가지 매개 변수로 검사하십시오.
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각 필드에 대한 리스너를 설정하는 모든 중복 코드를 제거 할 수 있습니다 . 멋있는!
1this 원래 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">
