apply, call, bind

JS에서 함수를 실행하게 되면 함수의 컨텍스트가 바뀌게 되어 

컨텍스트를 유지시켜줘야 하는 경우가 있다.

컨텍스트를 유지하여 실행하는 방법으로는 

함수를 실행 전에 변수를 설정해서 기존의 this를 할당 후,

해당 변수를 통해 컨텍스트를 유지하도록 할 수는 있다.

var view = this;

$("div.className").on("click", function() {

view.func();

});

하지만, 먼가 이런 방법 말고 Function 자체의 함수를 통해

컨텍스트를 유지하고 싶다면? Function 자체의 함수로 함수의 컨텍스트를 유지시킬 수 없을까??

call, apply, bind가 컨텍스트를 유지시켜주는 역할을 하는 함수다.

그럼 이 함수들의 차이점은 무엇인가?

우선 크게 call, apply와 bind로 카테고리를 분류할 수 있다. 

(사실 call, apply와 bind는 다른 결과를 반환하고 있기 때문이다.)

call, apply 함수는 컨텍스트를 바꿈과 동시에 바뀌어진 콜백 함수를 실행 후 콜백 함수 실행 결과 값을 리턴한다.

bind 함수는 컨텍스트를 바꾸고 콜백 함수를 리턴한다.  (콜백 함수를 실행하지 않는다.)

bind는 ECMA5에서 추가된 함수로 크로스 브라우징 이슈가 있어,

ie8 이하의 브라우저를 지원해야 하는 경우에는 사용하지 않는 것이 좋다.

그렇다면 call과 apply의 차이점은 무엇일까?

함수의 생김새를 살펴보자.

fun.call(thisArg[, arg1[, arg2[, ...]]])

fun.apply(thisArg, [argsArray])

위에서 볼 수 있듯이, 콜백 함수의 매개변수를 array 타입으로 받는가의 차이가 있다.

apply는 파라미터로 array 타입을 받지만, call은 array로 받지 않다는 차이가 있다.

이외의 함수 반환 값과 내용은 동일하다.

call 함수 사용 예시

var min = 1;

function smallest(param) {

return Math.min.call(Math, min, param);

 }

smallest(10); // 1

apply 함수 사용 예시

function smallest(array) {

 return Math.min.apply(Math, array);

}

var array = [1, 2, 3, 4];

smallest(array); // 1