[JavaScript] this 바인딩 call, apply, bind의 차이

What

call, apply, bind에 대한 차이를 알아보기 전 우리는 자바스크립트에서의 this에 대해서 이해할 필요가 있다.

단독으로 this를 호출할 경우 this는 window를 호출한다. 또한 객체 안에서 this는 해당 객체를 나타내기도 한다.

함수 안에서 사용할 경우 함수의 주인인 window 객체를 가리킨다. (strict mode에서는 undefined를 반환한다)

메서드를 설정하는 경우 this는 해당 메서드로 호출한 객체로 바인딩된다. 하지만, 간혹 다른 객체를 바인딩할 경우가 생길 수도 있다. 이 경우 call, apply, bind 메서드를 통해 간단히 해결할 수 있다.

 

How

call()

const obj = {
    name: '홍길동',
    myFunc: function(city){
        console.log(this.name, city);
    }
}

const newObj = {
    name: '제우스'
}

obj.myFunc('seoul'); // 홍길동, seoul
obj.myFunc.call(newObj, 'seoul'); // 제우스, seoul

call()은 첫 번째 인자로 this 바인딩 될 객체, 두 번째 인자부터는 myFunc 함수의 파라미터를 넣어준다.

위 코드를 보면, obj.myFunc.call(newObj, 'seoul')에서 call의 첫 번째 인자에 newObj 객체를 넣어주어서 newObj의 name이 this를 가리키게 해주었다.

 

apply()

const obj = {
    name: '홍길동',
    myFunc: function(city){
        console.log(this.name, city);
    }
}

const newObj = {
    name: '제우스'
}

obj.myFunc('seoul'); // 홍길동, seoul
obj.myFunc.apply(newObj, ['seoul']); // 제우스, seoul

apply()는 call()과 형식이 거의 똑같다. 단지 다른 점은 두 번째 인자를 배열로 받는다는 것이다.

 

bind()

const obj = {
    name: '홍길동',
    myFunc: function(city){
        console.log(this.name, city);
    }
}

const newObj = {
    name: '제우스'
}

obj.myFunc('seoul'); // 홍길동, seoul
const result = obj.myFunc.bind(newObj, 'seoul');
result(); // 제우스, seoul

bind()는 call()이나 apply()처럼 실행 함수가 아닌 this 바인딩을 바꿔주기만 하는 함수이다.

따라서 따로 변수에 담아서 호출하는 형태로 사용해야 한다.

 

1. this를 새로 바인딩하고 바로 실행하고 싶으면 call(), apply()
2. 실행하지 않고 변수에 담고 싶으면 bind()
3. call()과 apply()의 차이점은 단지 apply()의 두 번째 인자가 배열 형식이라는 점