[JS 문법] call, apply, bind 메소드로 this 명시적 바인딩하기

function a(x, y, z) {
  console.log(`this =`, this, `\nx = ${x}\ny = ${y}\nz = ${z}`);
}

a(1, 2, 3);

const obj = {
  a: "hi",
  b: "hello",
};

console.log("%ccall", "background-color: aqua;");
a.call(obj, 1, 2, 3);

console.log("%capply", "background-color: pink;");
a.apply(obj, [1, 2, 3]);

console.log("%capply", "background-color: orange;");
const bindTest = a.bind(obj);
bindTest(5, 6, 7);

const bindTest2 = a.bind(obj, 3);
bindTest2(9, 10);

 

3개 다 this를 명시적으로 바인딩 하기위한 메소드 인데

사용방법에만 차이가 있는 것이다.

 

첫번째 매개변수는 무조건 this에 넣고 싶은 것을 할당해주면된다. 만약에 this에 아무것도 바인딩 하고 싶지않으면 null을 작성해주면된다.

두번째 매개변수 부터는 해당 함수의 매개변수 개수 대로 넣어주면된다.

그런데 apply은 그 형식을 array 형태로 작성해줘야한다.

 

bind는 지금 보니까 curry과 비슷한 것 같다.

내가 만약 bindTest2 처럼 필요한 만큼 작성해서 변수에 담아놓고 재사용 할 때 유용할 것 같다.

 

---

** 자바스크립트 내장함수 Apply, Call 에 대해서 알아보자

1. apply 함수 개념 설명

var person = {
  인사 : function(){
  	console.log('안녕');
  }
}

person.인사(); // 안녕 출력

var person2 = {
  name : '손흥민'
}

: 인사라는 함수가 너무 잘 만들어서 person2에도 적용하고 싶음 , 그러나 person2를 직접 수정할 수 없음

 

person.인사()를 person2에 적용하고 싶을 때 apply를 쓰면됨

var person = {
  인사 : function(){
  	console.log(this.name + '안녕');
  }
}

var person2 = {
  name : '손흥민'
}

person.인사();
person.인사.apply(person2);

=> apply() : 그냥 함수를 옮겨와서 실행해주세요~

 

2. call 함수 개념 설명

: apply / call 비슷함

만약 person.인사() 메서드가 파라미터를 가지고 있는 함수라면 뒤에 나오는 apply, call 함수 2번째 파라미터 부터 넣어주면됨

person.인사.apply(person2, [1]); // person.인사(1)
person.인사.call(person2, 1); // person.인사(1)

근데 apply는 파라미터를 Array 형태로 집어넣기가 가능, call은 안됨

person.인사.apply(person2, [1, 2]); // person.인사(1,2)
person.인사.apply(person2, 1, 2); // person.인사(1, 2)

객체 다룰 때, 상속 기능 구현할 때 볼 수 있음

 

그럼 위에 3-1에서 본 아래 이 코드를 이해할 수 있다.

더하기.apply(undefined, 어레이); // undefined라는 오브젝트에 다가 적용해서 실행해주세요
더하기.apply(1, 어레이); // 첫번째 파라미터 아무거나 적어도됨 (함수를 복붙해서 실행할 오브젝트가 없을 뿐)

↳ 이 코든는 더하기() 함수에 [어레이] 내의 데이터를 파라미터로 넣고 싶을 때 쓴다고 했던 코드 이다.

apply를 쓴 이유는 파라미터로 Array를 집어넣기 가능하기 때문에 apply()를 사용한 것이다.