JS: call, apply, bind

binding

javascript 함수는 자신만의 this 를 갖고 있다. 예를 들어보자

function hello(){

console.log(this);
console.log(this.name);
}

를 실행하면 다음과 같은 결과가 나온다.

this 는 기본적으로 window 객체이다. 이때 우리가 hello 함수에서 window 객체가 아닌 다른 객체를 사용하고 싶을때 binding을 한다.
명시적으로 this를 window 가 아닌 다른 객체로 바꿔주는 함수가 call, apply, bind 이다.

 

call과 apply

다음은 call과 apply를 이용하여 hello 함수에 obj객체의 정보를 이용하는 모습이다.

const obj = {name : 'June'}

function hello(place){
console.log(`my name is ${this.name}, I live in ${place}`)
}

hello('Korea')
hello.call(obj, 'Korea') // hello에 obj의 정보를 가져온다.
hello.apply(obj,['Korea']) // hello에 obj의 정보를 가져온다.
//apply와 call의 차이점은 두번째 매개변수를 배열로 작성하느냐 안하느냐의 차이

첫번째 실행에서 this 는 window 객체이다.

두번째 실행에서 this는 obj 객체이다.

call 함수를 통해 hello함수의 this를 window에서 obj로 변경시켰다. obj의 정보를 hello 함수에서 쓸 수 있게 작업했다고 이해하면 될 것 같다.

세번째 실행에서는 apply 함수를 통해 this를 obj로 바꾸었다. 결과는 마찬가지이다.

 

call과 apply의 차이점은 첫번째 인자(this를 대체할 값)을 제외하고 실제 함수에 필요한 매개변수를 입력하는 방식이다. call과는 다르게 apply함수는 두번째 인자부터 모두 배열에 넣어준다.

 

 

bind

const obj = {name : 'June'}

function hello(place){
console.log(`my name is ${this.name}, I live in ${place}`)
}

hello('Korea')

const newHello = hello.bind(obj) // call, apply와 달리 바로 실행되지 않고 할당만 된다.
newHello('DokDo') // 실행

 

 

bind 함수가 call, apply와 다른 점은 함수를 실행하지 않는다는 것이다. 대신 bound 함수를 리턴한다.

이 bound함수 (newHello)는 this를 obj로 갖고 있는 함수이고 원하는 때에 언제든지 사용할 수 있다.

나는 obj의 정보를 갖고 있는 hello 함수라고 이해하였다. 각자 편한대로 말을 만들어서 이해하면 될 것같다.

 

 

참고자료 https://wooooooak.github.io/javascript/2018/12/08/call,apply,bind/

binding의 개념과 call, apply, bind의 차이점 · 쾌락코딩