자 바스 크 립 트 편 함수 와 코 리 화 실례 상세 설명

이 글 의 실례 는 자 바스 크 립 트 편 함수 와 코 리 화 를 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
지금까지 우 리 는 귀속 this 만 논 의 했 고,지금 은 더욱 깊이 공부 합 시다.
우 리 는 this 를 연결 할 수 있 을 뿐만 아니 라 매개 변수 일 수도 있 습 니 다.이것 은 비교적 적 게 사용 하지만 때로는 매우 편리 합 니 다.
bind 의 전체 문법 은 다음 과 같 습 니 다.

let bound = func.bind(context, arg1, arg2, ...);

상하 문this과 함수 의 초기 매개 변 수 를 연결 할 수 있 습 니 다.예 를 들 어 우 리 는 곱셈 함수mul(a,b)가 있다.

function mul(a, b) {
 return a * b;
}

우 리 는 이 함 수 를 바탕 으로 바 인 딩 을 사용 하여double함 수 를 만 들 수 있 습 니 다.

let double = mul.bind(null, 2);
alert( double(3) ); // = mul(2, 3) = 6
alert( double(4) ); // = mul(2, 4) = 8
alert( double(5) ); // = mul(2, 5) = 10

호출mul.bind(null, 2)새 함수double를 만 들 고 호출mul함 수 를 전달 하 며 첫 번 째 매개 변 수 는 null 이 고 두 번 째 매개 변 수 는 2 이 며 여러 매개 변수 전달 도 마찬가지 입 니 다.
이것 은 편 함수 응용 이 라 고 합 니 다.우 리 는 새로운 함 수 를 만들어 기 존의 매개 변수 값 을 고정 시 킵 니 다.
여 기 는 확실히 this 를 사용 하지 않 지만 bid 가 필요 하기 때문에 null 을 사용 해 야 합 니 다.
다음 코드 에서 함수triple는 곱 하기 3 의 기능 을 실현 합 니 다.

let triple = mul.bind(null, 3);
alert( triple(3) ); // = mul(3, 3) = 9
alert( triple(4) ); // = mul(3, 4) = 12
alert( triple(5) ); // = mul(3, 5) = 15

왜 우 리 는 보통 편 함 수 를 사용 합 니까?
여기 서 우리 편 함수 의 장점 은 이름 이 알 기 쉬 운 독립 함수(double,triple)를 만 드 는 것 입 니 다.호출 은 매번 첫 번 째 매개 변 수 를 입력 하지 않 아 도 됩 니 다.첫 번 째 매개 변 수 는 bid 를 통 해 고정 값 을 제공 하기 때 문 입 니 다.
또 다른 편 함 수 를 사용 하 는 상황 은 우리 가 매우 통용 되 는 함수 가 있 을 때 비교적 자주 사용 하 는 변 체 를 편리 하 게 제공 하기 위해 서 이다.
예 를 들 어,우 리 는 함수send(from, to, text)가 있 습 니 다.그러면 편 함 수 를 사용 하면 현재 사용자 가 보 낸 변 체 를 만 들 수 있 습 니 다.sendTo(to, text)상하 문 이 없 는 편 함 수 를 사용 하 다
인 자 를 고정 시 키 려 면 this 를 연결 하지 않 으 시 겠 습 니까?
내 장 된bind이 허용 되 지 않 습 니 다.문맥 을 무시 하고 매개 변수 로 이동 할 수 없습니다.다행히도 귀속 매개 변수partial함수 만 쉽게 실현 할 수 있 습 니 다.
다음 과 같다.

function partial(func, ...argsBound) {
 return function(...args) { // (*)
  return func.call(this, ...argsBound, ...args);
 }
}
// Usage:
let user = {
 firstName: "John",
 say(time, phrase) {
  alert(`[${time}] ${this.firstName}: ${phrase}!`);
 }
};
// add a partial method that says something now by fixing the first argument
user.sayNow = partial(user.say, new Date().getHours() + ':' + new Date().getMinutes());
user.sayNow("Hello");
// Something like:
// [10:00] Hello, John!

호출partial(func[, arg1, arg2...])함수 의 결 과 는 호출func의 포장 기(*줄)입 니 다.

this 일치user.sayNowuser를 통 해 호출 되 었 기 때 문)

그리고 그 에 게...gars Bound―partial 은 이 매개 변수("10:00")를 사용 하여 호출 합 니 다.

그리고 파 라 메 터 를 제공 합 니 다.
그래서 spread 연산 자 를 사용 하면 쉽게 이 루어 집 니 다.그 렇 죠?
loadash 라 이브 러 리 도 제공 합 니 다.
코 리 화
때때로 사람들 은 위 에서 언급 한 편 함수 와 다른 이름 이'코 리 화'함수 기능 이라는 것 을 헷 갈 리 게 한다.코 리 화 는 또 다른 재 미 있 는 처리 함수 기술 이다.여기 서 우 리 는 반드시 언급 해 야 한다.
커 리 화(Currying):호출 함수f(a,b,c)를f(a)(b)(c)방식 으로 호출 합 니 다.
우 리 는 코 리 화 함 수 를 실현 하고 이원 매개 변수 함수,즉 변환f(a,b)에서f(a)(b)까지 실행 합 니 다.

function curry(func) {
 return function(a) {
  return function(b) {
   return func(a, b);
  };
 };
}
// usage
function sum(a, b) {
 return a + b;
}
let carriedSum = curry(sum);
alert( carriedSum(1)(2) ); // 3

위 는 일련의 포장 기 를 통 해 이 루어 진 것 이다.

curry(func)의 결 과 는function(a)의 포장 기 였 다.

호출sum(1)은 매개 변수 가 품사 환경 에 저 장 된 다음 에 새로운 포장 기function(b)

로 돌아 가 는 것 이다.

그리고sum(1)(2)2 를 제공 하고 최종 호출function(b)을 한 다음 에 원시 다 변수 함수sum에 전달 합 니 다.

lodash 라 이브 러 리 와 같은 코 리 화의 고급 실현 이 있 습 니 다.curry 는 더욱 복잡 한 기능 을 실현 할 수 있다.포장 기 를 되 돌려 줍 니 다.함수 가 모든 매개 변 수 를 정상적으로 호출 하거나 편향 함 수 를 되 돌려 줍 니 다.

function curry(f) {
 return function(..args) {
  // if args.length == f.length (as many arguments as f has),
  //  then pass the call to f
  // otherwise return a partial function that fixes args as first arguments
 };
}

코 리 화?응용 장면?
고급 코 리 화 는 함수 가 정상적으로 호출 될 수 있 고 편 함수 로 도 쉽게 호출 할 수 있다.그 우 세 를 이해 하기 위해 서 우 리 는 실제 적 인 예시 설명 이 필요 하 다.
예 를 들 어 로그 함수log(date,importance,message)가 있 고 출력 정 보 를 포맷 합 니 다.실제 항목 에서 이 함수 들 도 네트워크 를 통 해 보 내 거나 걸 러 내 는 등 유용 한 기능 이 많 습 니 다.

function log(date, importance, message) {
 alert(`[${date.getHours()}:${date.getMinutes()}] [${importance}] ${message}`);
}

코 리 화 를 사용 하 라 고!

log = _.curry(log);

코 리 화 후에 도 정상적으로 호출 할 수 있다.log(new Date(), "DEBUG", "some debug");
우리 도 콜 리 화 방식 으로 호출 할 수 있다.log(new Date())("DEBUG")("some debug"); // log(a)(b)(c)편리 함 수 를 정의 합 니 다.당일 로 그 를 기록 합 니 다.

// todayLog will be the partial of log with fixed first argument
let todayLog = log(new Date());
// use it
todayLog("INFO", "message"); // [HH:mm] INFO message

현재 편리 함 수 를 다시 정의 합 니 다:당일 debug 정 보 를 기록 합 니 다:

let todayDebug = todayLog("DEBUG");
todayDebug("message"); // [HH:mm] DEBUG message

그래서:
1.코 리 화 후 아무것도 잃 지 않 았 습 니 다.log 는 정상적으로 호출 할 수 있 습 니 다.
2.우 리 는 여러 장면 에서 사용 하 는 편리 한 편 함 수 를 생 성 할 수 있다.
고급 코 리 화 실현
관심 이 있다 면 위 에서 언급 한 고급 코 리 화 실현 을 제공 합 니 다.

function curry(func) {
 return function curried(...args) {
  if (args.length >= func.length) {
   return func.apply(this, args);
  } else {
   return function(...args2) {
    return curried.apply(this, args.concat(args2));
   }
  }
 };
}
function sum(a, b, c) {
 return a + b + c;
}
let curriedSum = curry(sum);
// still callable normally
alert( curriedSum(1, 2, 3) ); // 6
// get the partial with curried(1) and call it with 2 other arguments
alert( curriedSum(1)(2,3) ); // 6

이곳 의 실현 은 보기 에는 좀 복잡 해 보이 지만,확실히 이해 하기 쉽다.curry(func)의 결 과 는 포장 기 curried 입 니 다.다음 과 같 습 니 다.

// func is the function to transform
function curried(...args) {
 if (args.length >= func.length) { // (1)
  return func.apply(this, args);
 } else {
  return function pass(...args2) { // (2)
   return curried.apply(this, args.concat(args2));
  }
 }
};

우리 가 실행 할 때 두 가지 가 있 습 니 다.
1.args 수가 원 함수 가 정의 한 매개 변수 개수 와 같 거나 길 면 직접 호출 합 니 다.
2.편 함 수 를 가 져 옵 니 다:그렇지 않 으 면 func 함 수 를 호출 하지 않 고 다른 포장 기 pass 로 돌아 가 연결 되 기 전의 매개 변 수 를 제공 하여 새로운 매개 변수 로 curried 를 다시 사용 합 니 다.그 다음 에 새로운 호출 을 다시 실행 하고 새로운 편향 함수(매개 변수 가 부족 하면)나 최종 결 과 를 되 돌려 줍 니 다.
예 를 들 어sum(a, b, c)어떻게 되 는 지,세 개의 매개 변수 가 있 기 때문에sum.length=3.
호출curried(1)(2)(3):
1.첫 번 째 호출curried(1),품사 환경 에서 1 을 기억 하고 포장 기pass를 되 돌려 줍 니 다.
2.(2)호출 포장 기pass를 사용 합 니 다.앞의 매개 변수(1)를 가지 고 연결 한 다음 에 호출curried(1,2)합 니 다.매개 변수 수량 이 3 보다 적 기 때문에 pass 를 되 돌려 줍 니 다.
3.다시(3)호출 된 포장 기 pass 를 사용 하여 이전의 매개 변수(1,2)를 가지 고 3 을 추가 하고 호출curried(1,2,3)―최종 적 으로 세 개의 매개 변 수 를 가지 고 원시 함수 에 전달 합 니 다.
여전히 지우 지 않 으 면 머 릿 속 이나 종이 에 순서대로 호출 과정 을 추적 할 수 있다.
함수 매개 변수 길이 만 고정
코 리 화 는 함수 가 알려 진 매개 변수 수량 을 고정 시 켜 야 합 니 다.
코 리 보다 많이 녹 아 요.
코 리 화 정의 에 따라sum(a,b,c)에서sum(a)(b)(c)로 전환 합 니 다.
그러나 자바 script 에서 대부분 정 의 를 초월 하고 함수 가 여러 개의 매개 변수 변 수 를 사용 하여 실행 할 수 있 습 니 다.
총결산
이미 알 고 있 는 함수 의 일부 매개 변 수 를 고정 시 키 면 결과 함 수 는 편 함수 라 고 불 리 며 bid 를 사용 하여 편 함 수 를 얻 고 다른 방식 으로 도 이 루어 집 니 다.
우리 가 같은 매개 변 수 를 한 번 에 반복 하고 싶 지 않 을 때,편 함 수 는 매우 편리 하 다.만약 에 우리 가send(from,to)함수 가 있다 면 from 이 항상 같다 면 편 함 수 를 사용 하여 호출 을 간소화 할 수 있 습 니 다.
커 리 화 는 변환 함수 호출f(a,b,c)에서f(a)(b)(c)까지 입 니 다.자바 script 은 보통 정상 적 인 호출 을 실현 할 뿐만 아니 라 매개 변수 수량 이 부족 할 때의 편 함수 방식 도 호출 합 니 다.
우리 가 쉬 운 편 함 수 를 생각 할 때,코 리 화 는 매우 좋다.예 를 들 어 우리 가 이미 본 로그 예제:통용 되 는 함 수 는log(date,importance,message)이 고 코 리 화 후에 편 함 수 를 얻 는 것 은'하나의 매개 변수log(date)'또는 두 개의 매개 변수log(date,importance)'입 니 다.
더 많은 자 바스 크 립 트 관련 내용 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.