js 에서 apply, call, bid 의 공통점 과 차이 점

javascript 에서 apply, call, bind 는 특정한 함수 가 실 행 될 때의 문맥 을 바 꾸 기 위해 존재 합 니 다. 쉽게 말 하면 함수 체 내부 this 의 방향 을 바 꾸 기 위해 서 입 니 다.
먼저 예 를 들 어 보 겠 습 니 다.

var person = {
  name:'tom',
  age:18,
  say:function(){
    console.log('My name is ' + this.name + ' and age ' + this.age)
  }
}

person.say(); //"My name is tom and age 18"

그러나 저 는 지금 person 2 가 있 습 니 다. 우 리 는 그것 에 대해 say 방법 을 다시 정의 하고 싶 지 않 습 니 다. 그러면 우 리 는 call 또는 apply 를 통 해 apple 의 say 방법 을 사용 할 수 있 습 니 다.

var person1 = {
  name:'Nicholas',
  age:20
}

person.say.call(person1)
person.say.apply(person1)
person.say.bind(person1)()

따라서 콜, apply, bind 는 this 를 동적 으로 바 꾸 기 위해 나타 난 것 임 을 알 수 있 습 니 다. 하나의 object 에 어떤 방법 이 없 지만 다른 것 은 콜, apply 또는 bind 를 통 해 다른 대상 의 방법 으로 조작 할 수 있 습 니 다.
call 과 apply 의 차이
apply, call 의 경우 역할 이 똑 같 고 매개 변 수 를 받 아들 이 는 방식 만 다르다.예 를 들 어 다음 과 같은 함수 정의 가 있 습 니 다.

var person = {
  name:'tom',
  age:18,
  sex:' ',
  say:function(){
    console.log('My name is ' + this.name + ' age is ' + this.age + ' and sex is ' + this.sex)
  }
}

var person2 = {
  name:'Nicholas',
  age:20
}

person.say();
person.say.call(person2,' ');
person.say.apply(person2,[' ']);

콜 은 매개 변 수 를 순서대로 전달 해 야 하고 apply 는 매개 변 수 를 배열 에 넣 는 것 을 볼 수 있 습 니 다.
bind
MDN 의 설명 은 bid () 방법 은 바 인 딩 함수 라 고 하 는 새로운 함 수 를 만 들 것 입 니 다. 이 바 인 딩 함 수 를 호출 할 때 바 인 딩 함 수 는 이 를 만 들 때 bid () 방법 에 들 어 가 는 첫 번 째 매개 변 수 를 this 로 하고 bid () 방법의 두 번 째 및 이후 매개 변수 에 바 인 딩 함수 가 실 행 될 때 자체 의 매개 변 수 를 순서대로 원 함수 의 매개 변수 로 호출 합 니 다.
다음은 예 를 들 어 보 겠 습 니 다.

var bar = function(){
  console.log(this.x)
}

var foo = {
  x:3
}

var func = bar.bind(foo);
func();

bid 를 사용 하 는 것 은 새로운 함 수 를 만 들 었 습 니 다. 우리 가 사용 할 때 호출 되 는 것 을 볼 수 있 습 니 다.
다음은 우리 가 문 제 를 풀 고 콜, apply 를 더욱 깊이 이해 합 니 다. log 방법 을 정의 하여 console. log 방법 을 대리 할 수 있 도록 합 니 다. 흔히 볼 수 있 는 해결 방법 은:

function log(msg){
  console.log(msg);
}
log(1) //1
log(1,2); //1

위의 코드 는 기본 적 인 기능 을 완 성 했 지만 들 어 오 는 매개 변수의 개수 가 고정 되 지 않 으 면 위의 방법 이 효력 을 잃 습 니 다. 이 럴 때 apply 나 call 을 사용 하 는 것 을 고려 할 수 있 습 니 다. 여기에 몇 개의 매개 변수 가 들 어 오 는 지 확인 하지 못 하기 때문에 apply 를 사용 하 는 것 이 가장 좋 습 니 다. 방법 은 다음 과 같 습 니 다.

function log(){
  console.log.apply(console,arguments)
}

log(1,2)  //1 2

다음 요 구 는 모든 log 메시지 에 '(app)' 을 추가 하기 전에 중단 하 는 것 입 니 다. 예 를 들 어:

log(1,2) //(app) 1 2

우 리 는 arguments 가 가짜 배열 이라는 것 을 알 고 있 기 때문에 Array. prototype. slice. call (arguments) 을 사용 하여 가짜 배열 을 배열 로 전환 시 켜 야 합 니 다. 그러면 배열 의 방법 을 사용 할 수 있 습 니 다. 구체 적 으로 다음 과 같이 실현 할 수 있 습 니 다.

function log(){
  var args = Array.prototype.slice.call(arguments);
  args.unshift('(app)');
 
  console.log.apply(console, args);
}

log(1,2)  //(app)  1  2

총결산

apply, call, bid 세 가 지 는 모두 함 수 를 바 꾸 는 this 대상 의 지향 이다.

apply, call, bid 세 가지 첫 번 째 매개 변 수 는 모두 this 가 가리 키 는 대상, 즉 지정 하고 자 하 는 문맥 입 니 다.

apply, call, bid 세 가 지 는 모두 후속 매개 변 수 를 이용 하여 전달 할 수 있다.

bid 는 대응 함 수 를 되 돌려 주 고 나중에 호출 하기 편리 합 니 다.apply, call 은 즉시 호출 됩 니 다.