[javascript] 자바 스크립트에서 여러 개의 화살표 기능은 무엇을 의미합니까?

그게 카레 기능입니다

먼저이 기능을 두 가지 매개 변수로 검사하십시오.

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각 필드에 대한 리스너를 설정하는 모든 중복 코드를 제거 할 수 있습니다 . 멋있는!

¹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">

답변

No arrow funcs              Implicitly return `e=>{…}`    Explicitly return `e=>{…}`
---------------------------------------------------------------------------------
function (field) {         |  field => e => {            |  field => {
  return function (e) {    |                             |    return e => {
      e.preventDefault()   |    e.preventDefault()       |      e.preventDefault()
  }                        |                             |    }
}                          |  }                          |  }

Unbound                     Explicitly bound            Implicitly bound
------------------------------------------------------------------------------
function (field) {         |  function (field) {       |  field => e => {
  return function (e) {    |    return function (e) {  |
      this.setState(...)   |      this.setState(...)   |    this.setState(...)
  }                        |    }.bind(this)           |
}                          |  }.bind(this)             |  }

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

field => // function(field){}
e => { e.preventDefault(); } // function(e){e.preventDefault();}

function (field) {
    return function (e) {
        e.preventDefault();
    };
}

// Basic syntax:
(param1, param2, paramN) => { statements }
(param1, param2, paramN) => expression
   // equivalent to:  => { return expression; }

// Parentheses are optional when there's only one argument:
singleParam => { statements }
singleParam => expression

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

// is equal to 
function handleChange(field) {
  return function(e) {
    e.preventDefault()
    // Do something here
  }
}

const handleClick = (event, id) {
  event.preventDefault()
  // Dispatch some delete action by passing record id
}

const handleClick = id => event {
  event.preventDefault()
  // Dispatch some delete action by passing record id
}

const Confirm = props => (
  <div>
    <h1>Are you sure to delete?</h1>
    <button onClick={handleClick(props.id)}>
      Delete
    </button>
  </div
)

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

class Something{
    constructor(props) {
       super(props);
       this.handleChange = this.handleChange.bind(this);
    }
    handleChange(field) {
        return function(e) {
           e.preventDefault();
           // do something
        }
    }
}

const abc = (field) => field * 2;

const abc = () => { return field*2; }

const handleChange = () => {
   console.log(arguments) // would give an error on running since arguments in undefined
}

const handleChange = (...args) => {
   console.log(args);
}

handleChange = task => event => { ... operations which uses both task and event... };