여러 중첩 화살표 함수는 JavaScript에서 어떻게 작동합니까?

JavaScript의 여러 화살표 함수 이해

JavaScript에서 다음과 같은 코드를 접할 수 있습니다.

  e.preventDefault();
  /// Do something here
}

커리 함수

이 코드 카레 기능을 보여줍니다. 카레 함수는 함수를 반환하는 함수로, 인수를 부분적으로 적용할 수 있습니다.

화살표 함수 없이 다음 예를 고려하세요.

const add = (x, y) => x + y
add(2, 3) //=> 5

카레 형식:

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

화살표 기능 없음:

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

초점 반환 값에 대해

화살표 함수는 다음과 같이 동작합니다(반환 값에 주의).

const f = someParam => returnValue

따라서 추가 함수에서 숫자는 함수를 반환합니다.

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

이는 숫자를 더하면 함수:

add(2) // returns (y => 2 + y)

커리 함수 호출

커리 함수를 사용하려면 다르게 호출하세요.

add(2)(3)  // returns 5

이것은 첫 번째 함수 호출은 두 번째 함수를 반환합니다. 두 번째 함수 호출만이 실제 결과를 제공합니다.

코드에 적용

코드에서:

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

화살표 함수 제외:

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

화살표 함수가 이것을 어휘적으로 묶기 때문에 더 비슷해 보입니다. 이것은:

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

handleChange가 지정된 필드에 대한 함수를 생성한다는 의미입니다. 중복 없이 각 입력에 대해 이벤트 리스너를 설정하는 React 기술입니다.

더 많은 화살표

두 개 이상의 화살표 기능을 순서대로 지정할 수 있습니다.

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

카레와 Arity

커링은 당신을 놀라게 할 수 있습니다. 여기서 $는 두 개의 매개변수가 있는 커리 함수로 정의되지만 인수는 원하는 만큼 제공할 수 있습니다.

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

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