call, apply, bind 차이

 

call

const obj = {name:'영희'}; // this를 대체할 객체
const yourName = function {
	console.log(`$(this.name)님 반갑습니다.`);
}

yourName.call(obj); // 영희님 반갑습니다.

yourName에 call메소를 이용해서 obj를 호출하면 obj 값을 this를 대체해서 사용할 수 있다.

 

 

만약 뒤에 넘겨줄 인자가 있을 경우 call호출 시에 this값 뒤에 인자를 붙여주고

함수에 매개변수를 넣어주면 된다.

const obj = {name:'영희'}; // this를 대체할 객체
const yourName = function(addr) {
	console.log(`$(addr)에서 오신 $(this.name)님 반갑습니다.`);
}

yourName.call(obj, '서울'); // 서울에서 오신 영희님 반갑습니다.

 

그럼 위와 똑같은 예제를 apply로 만들어 보자

apply

const obj = {name:'영희'}; // this를 대체할 객체
const yourName = function(addr) {
	console.log(`$(addr)에서 오신 $(this.name)님 반갑습니다.`);
}

yourName.apply(obj, ['서울']); // 서울에서 오신 영희님 반갑습니다.

apply가 call과 다른 점은 인자를 배열로 넣는다는 점이다.

 

그렇다면 같은 예제를 bind로 나타내면 어떻게 될까?

 

bind

const obj = {name:'영희'}; // this를 대체할 객체
const yourName = function(addr) {
	console.log(`$(addr)에서 오신 $(this.name)님 반갑습니다.`);
}

yourName.bind(obj, '서울'); // undefined

bind 메소드는 객체를 생성하고 호출하지는 않는다.

호출하기 위해서는 변수를 이용하면 된다.

 

const obj = {name:'영희'}; // this를 대체할 객체
const yourName = function(addr) {
	console.log(`$(addr)에서 오신 $(this.name)님 반갑습니다.`);
}

const a = yourName.bind(obj, '서울');
a(); // 서울에서 오신 영희님 반갑습니다.