✍️ 자바스크립트 디자인 패턴에 대해 공부하다가 함수 상속과 관련하여 call, apply, bind를 접하게 되었다. 유사 배열 사용 시에도 유용하게 쓰이는 call, apply, bind에 대해 정리 해보았다.
call, apply, bind
- 이미 할당되어있는 다른 객체의 함수/메소드를 호출하는 해당 객체(this)에 재할당할때 사용함.
▶️ 함수의 this를 지정해주는 메소드
call
function.call( thisArg, argument)thisArg: function 에 제공되는 this 값- argument : 인수 목록, 여러 개 들어 갈 수 있음.
apply
function.apply( thisArg, [argument])thisArg: function 에 제공되는 this 값- argument : 인수 배열, 하나만 들어 감.
bind
function.bind( thisArg )thisArg: function 에 제공되는 this 값- call, apply는 function 실행 까지 되지만, bind는 실행은 되지 않음. this 지정만 함.
사용 패턴
const mangojang = {name: 'mangojang'};
const monkey = {name: 'monkey'};
const panda = {name: 'panda'};
const sayName = function(fruit){
console.log(`my name is ${this.name}. I like ${fruit}`);
}
sayName("mango"); // my name is . I like mango
const setThis = sayName.bind(mangojang);
setThis("mango"); // my name is mangojang. I like mango
sayName.call(monkey,"banana"); // my name is monkey. I like banana
sayName.apply(panda,["bamboo"]); // my name is panda. I like bamboo, apple, banana
참고 문헌
한 걸음 한 걸음 계속 걷는 자가 일류다