[JavaScript] call, apply, bind (this)

1. call, apply

call 메소드는 객체에 함수를 상속시킬 수 있다. 즉 함수안에 this가 가리키는 객체를 지정해주는 메소드이다. 이러한 call 메소드와 apply메소드는 비슷하다. 

call메소드는 .call(참조할 객체명,인자,인자, ...) 로 지정하는 반면에 apply메소드는 .apply(참조할 객체명,[인자, 인자, ...]) 형식으로 작성한다. 

즉, 함수를 호출할 때 매개변수로 전달할 값들을 하나하나 전달할지, 배열로 묶어서 전달할지 차이이다.

const kim = { name: "kim", first: 10, second: 20 };

const lee = { name: "lee", first: 10, second: 10 };

function sum(arg1, arg2) {

return arg1 + (this.first + this.second) + arg2;

}

console.log(sum.call(kim, "점수합계는 ", "점 입니다.")); // 점수합계는 30점 입니다.

console.log(sum.apply(lee, ["점수합계는 ", "점 입니다."])); // 점수합계는 20점 입니다.

일반적으로 객체안에 함수가 들어가있으면 해당 함수안에있는 this는 해당함수를 포함하고있는 객체를 가리키지만 위와같이 분리되어 함수를 정의할 경우 this가 가리키는 객체는 window 객체이다. 

call과 apply를 사용하기 전에 sum함수안에 this는 window를 가리킨다.

이때 call, apply를 사용하면 this가 가르키는 대상을 위에서처럼 변경할 수 있다.

2. bind

bind 메소드는 함수안의 this가 가리키는 객체를 영구적으로 고정시키는 역할을 하며 새로운 함수를 만들어내는 메소드이다.

const kim = { name: "kim", first: 10, second: 20 };

const lee = { name: "lee", first: 10, second: 10 };

function sum(prefix) {

return prefix + (this.first + this.second);

}

const kimSum = sum.bind(kim, "합계 : ");

console.log(kimSum()); // 합계 : 30

bind 메소드 또한 call, apply 메소드와 마찬가지로 첫번째 인자는 함수안의 this가 가리키는 객체를 작성하며 두번째 인자들부터는 함수가 호출될때 함수의 매개변수에 들어갈 인자들이 온다.

bind 메소드를 사용했을때 기존의 sum함수에 변형을 주는것이 아니고 원형을 참고하여 취지에 맞는 새로운 함수를 리턴하는것이다. 그러므로 원본 sum함수에는 영향을 주지않는다.

정리해보면

call과 apply는 실행되는 함수의 this값을 원하는 객체로 바꿔서 실행할 수 있게 해준다.

bind는 실행되는 함수의 this값을 원하는 객체로 영구적으로 고정시키는 새로운 함수를 만들어낸다.

둘은 비슷한듯 조금 다르다.