Javascript 코어개념 - call/apply/bind

Function.prototype.bind / call / apply의 차이점은 무엇인가요?

⇒ this의 일반 바인딩 규칙외에, 명시적으로 this를 바인딩하는 방법들입니다.

1. CALL 메서드

: 메서드의 호출 주체인 함수를 즉시 실행하도록 하는 명령. 임의의 객체를 this로 지정할 수 있음

(첫번째 인자를 this로 바인딩, 나머지 인자들은 호출할 함수의 매개변수로 사용)

var func = function (a,b,c) {
    console.log(this, a, b, c);
};

func(1,2,3); //this ===Window(일반 함수로 호출했기 때문에 전역객체를 바라봄)
func.call({**x:1**}, 4,5,6); //this ==={x:1}

2. APPLY 메서드

:call메서드와 기능적으로 완전히 동일. 차이점은 호출할 함수의 매개변수를 배열로 지정한다는 점.

var func = function (a,b,c) {
    console.log(this,a,b,c); //this === {x:1}
};
//첫번째 인자 : this지정, 두번째 인자: 배열형태로 호출할 함수의 매개변수 지정
func.apply(**{x:1}**,**[4,5,6]**);  // {x:1} 4 5 6 출력

var obj = {
    a: 1,
    method: function (x,y) {
        console.log(this.a,x,y);
    }
};
obj.method.apply({a:4}, [5,6]) //4 5 6 출력

3. BIND 메서드

call과 비슷하지만 즉시 호출하지 않고 새로운 함수를 return하기만 하는 메서드.

var func = function (a,b,c,d) {
    console.log(this, a,b,c,d);
};
func(1,2,3,4); //this === window(함수를 함수로 호출했기 때문)

var bindFunc1 = func.bind({ x: 1}); //func함수의 this를 {x:1}로 바인딩한 함수를 **반환**
bindFunc1(5,6,7,8); //{x:1} 5 6 7 8 출력 

+상위 컨텍스트의 this를 내부함수나 콜백 함수에 전달하기.

(var self = this;의 방법으로 우회하는 것보다 깔끔하게 처리할 수 있음)

//CALL 사용
var obj= {
    outer : function () {
        console.log(this);
        var innerFunc = function () {
            console.log(this);
        };
    **//호출시 call메서드 사용(this지정후 즉시 실행하므로)**
        **innerFunc.call(this)**; 
    //innerFunc();로 했다면 전역 객체가 this가 됐을 것.
    }
};
obj.outer();

//BIND사용
var obj = {
    outer: function () {
        console.log(this);
    **// 함수 선언시 바로 bind메서드를 사용(return만 하므로)**
        var innerFunc = function () {
            console.log(this);
        **}.bind(this);**
        innerFunc();
    }
};
obj.outer();

(cf. 화살표 함수 사용시, this 바인딩 자체를 스킵하므로 상위 스코프의 this를 가져오게 됨)

결론

• call, apply메소드는 this를 명시적으로 지정하면서 함수 /메서드를 호출합니다(즉시 실행)
• bind메서드는 this 및 함수에 넘길 인수를 일부 지정해서 새로운 함수를 만듭니다.(this 명시된 함수를 return만 함. 실행하지 않음)

Reference

<코어 자바스크립트>