Currying은 JavaScript의 여러 화살표 기능과 어떻게 작동합니까?

JavaScript에서 여러 화살표 함수로 Currying

React 애플리케이션에서 다음과 같은 코드를 접할 수 있습니다.

handleChange = field => e => {
  e.preventDefault();
  /// Do something here
}

이 수수께끼 같은 구문은 커리라고 알려진 것을 나타냅니다. 함수.

커링이란 무엇인가요?

커링은 함수를 부분적으로 정의할 수 있도록 하는 기술입니다. 예:

const add = x => y => x + y

이것은 기존 함수와 동일합니다:

const add = function (x) {
  return function (y) {
    return x + y
  }
}

반환 값에 초점

화살표 함수에서, 반환 값은 다음과 같이 표시됩니다.

const f = someParam => returnValue

따라서 add 함수는 함수:

const add = x => (y => x + y)

함수 호출:

add(2)(3)  // returns 5

이는 외부 함수 호출이 내부 함수를 반환하기 때문에 발생합니다.

handleChange 코드 이해

handleChange에 적용 코드:

handleChange = function(field) {
  return function(e) {
    e.preventDefault()
    // Do something here
  };
};

화살표 함수는 컨텍스트를 유지하므로 사실상 다음과 같습니다.

handleChange = function(field) {
  return function(e) {
    e.preventDefault()
    // Do something here
  }.bind(this)
}.bind(this)

이 코드는 특정 필드에 대한 함수를 생성합니다. React에서는 코드를 중복하지 않고 다양한 입력 필드에 대한 리스너를 설정하는 데 사용됩니다.

여러 화살표 함수

여러 화살표 함수를 순서대로 지정할 수 있어 다음과 같은 놀라운 기능이 가능합니다. 이것은:

const $ = x => k =>
  $ (k(x))

$(Lisp 구문의 말장난)이라고 불리는 이 카레 함수는 다음과 같은 것으로 보입니다. 소수의 개념을 추상화하여 임의 개수의 인수를 허용합니다.

위 내용은 Currying은 JavaScript의 여러 화살표 기능과 어떻게 작동합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!