call, apply, bind 메서드

메서드 빌려쓰기 - call, apply, bind

 

 

call 과 apply 

• 첫번째 인자로 실행할 대상 함수의 this 값을 대체할 다른 객체를 전달 받음

• 두번째 인자로 call 함수의 경우 호출할 함수에 전달할 매개변수를 별개의 인자들로 받으며, apply 함수의 경우 call 과 다르게 함수에 전달할 매개변수를 배열로 받음

 

예제

const Jack = {
    name: 'Jack',
};

const info = function(age, city) {
    console.log(this);
    console.log(`name : ${this.name}, age : ${age}, city: ${city}`);
};

info(12, 'Daegu');                 --  ①
info.call(Jack, 12, 'Incheon');    --  ②
info.apply(Jack, [12, 'Guro']);    --  ③

 

출력결과

 

설명

① 실행 시, this 는 window 객체를 가리킴

②,③ 실행 시, call/apply 함수의 첫번째 파라미터에 this를 Jack으로 대체, call/apply의 두번째 인자에서 차이점 발생

 

 

 

bind 

• this 값을 대체할 다른 객체를 전달 받음

• call/apply 함수는 해당 함수를 즉시 실행시키는 반면, bind 함수의 경우 즉시 실행시키지 않고 새로운 함수를 리턴

• 함수를 즉시 실행 대신 특정 변수에 저장, 특정 조건 성립 또는 필요 시 저장한 변수를 가져와 실행 할 경우 bind 함수 사용

 

예제

const Jack = {
    name: 'Jack',
};

const info = function(age, city) {
    console.log(this);
    console.log(`name : ${this.name}, age : ${age}, city: ${city}`);
};

const jackInfo = info.bind(Jack, 12, 'Incheon'); 
jackInfo();

 

설명

bind 한 결과 리턴되는 함수를 jackInfo 에 저장, 이후 필요한 시점에 함수를 실행

 

 

 

 

 

 

참고

https://soldonii.tistory.com/67?category=862198