다시 보는 call, apply, bind 차이

 

 

call 과 apply, bind는 함수를 호출하면서 첫번째 인자로 전달하는 객체에 this를 바인딩 할 수 있습니다. call과 apply를 통해서 함수를 실행하면, 함수를 바로 실행하면서 유사 배열 객체인 arguments 객체에 배열 매소드를 사용할 수 있습니다. 하지만 bind 함수를 실행하지 않고 새로운 함수를 반환하기 때문에 비동기적 코드 실행에 유리합니다.

call

function steak (spice) {
  console.log(`오늘 요리는 ${this.meat} 스테이크에 ${spice}를 뿌린 스테이크입니다.`)
}

const food = {
  meat : '소고기'
};

steak.call(food, '후추');
//오늘 요리는 소고기 스테이크에 후추를 뿌린 스테이크입니다.

apply

call과 비슷하지만 다른 점은 인자를 배열 형태로 가져옵니다. 이때 배열 자체로 전달하는 것이 아니라 배열의 요소를 전달한다. 

function steak (spice, flavor, color) {
  console.log(`오늘 요리는 ${this.meat} 스테이크에 ${spice}를 뿌린 스테이크입니다.`)
  console.log(`${flavor}맛이 나고 ${color}빛깔이 맛나보이네요.`)
}

const food = {
  meat : '소고기'
};

steak.apply(food, ['후추', '버터', '노스름한']);

//오늘 요리는 소고기 스테이크에 후추를 뿌린 스테이크입니다.
//버터맛이 나고 노스름한빛깔이 맛나보이네요.

bind

bind도 첫 번째 인자에 this를 바인딩한다는 점은 같지만, 함수를 바로 실행하지 않기 때문에 따로 함수를 실행해줘야한다.

function steak (spice, flavor, color) {
  console.log(`오늘 요리는 ${this.meat} 스테이크에 ${spice}를 뿌린 스테이크입니다.`)
  console.log(`${flavor}맛이 나고 ${color}빛깔이 맛나보이네요.`)
}

const food = {
  meat : '소고기'
};

const test = steak.bind(food, '후추');

test('버터', '노르스름한');

//오늘 요리는 소고기 스테이크에 후추를 뿌린 스테이크입니다.
//버터맛이 나고 노스름한빛깔이 맛나보이네요.