23/10/15 TIL __ .call() / .apply() / .bind()

 

 

 

🚗  this의 바인딩 

 

1.     . call( )

• .call() 은 즉시실행함수 이면서,  this에 값을 바인딩 할 수 있는 애다. 
• .call(this가 참조 할 대상, 해당 함수에 넣을 파라미터 값)

 

호출 주체가 없는 경우.

var func = function (a, b, c) {
  console.log(this, a, b, c); //{ x: 1 } 1 2 3
};

func.call({ x: 1 }, 1, 2, 3);

 

 

호출 주체가 있는 경우

var obje = {
  gogo: function (a) {
    console.log(this, a); 
  },
};

//this에 바인딩 하지 않는 경우
obje.gogo(2); //obj내부에 있는 애들 전체 호출 { gogo: [Function: gogo], toto: [Function: toto] } 2

//this 바인딩 한 경우
obje.gogo.call({ toto: 3 }, 2); //{ toto: 3 } 2

 

 

 

2.  . apply( )

• 매개변수 자리에 넣을 값들을 대괄호로 묶어줘야만 한다.
• .call() 과 비슷하다. 

 

let obj4 = {
  a: 3,
  method: function (b, c) {
    console.log(this.a, b, c);
  },
};
obj4.method(7, 9); //3 7 9

obj4.method.apply({ a: 99 }, [7, 9]); //99 7 9

 

 

 

 

3.  . bind ( )

• 즉시실행하는  .call( ), .apply( )  와는 달리 함수에 this를 미리 적용하고, 이후에 실행한다.  
• 즉시 실행이 아니기 때문에 훨씬 더 많이 사용한다. 
• 부분 적용 함수
• 바인드 된 애들을 추척하기 좋은 name 속성이 있다.

 

let gu = function (a, b, c, d) {
  console.log(this, a, b, c, d);
};

//함수에 this를 미리 적용
let guBind = gu.bind({ e: "애애" });
guBind("일", "이", "삼", "사"); //{ e: '애애' } 일 이 삼 사

//부분 적용 함수
let guBind2 = gu.bind({ e: "애애" }, 8, 0);
guBind2("삼", "사"); //{ e: '애애' } 8 0 삼 사

//바인드 된 애드을 추적하기 좋은 name 속성이 있다.
console.log(gu.name); //gu
console.log(guBind.name); //bound gu
console.log(guBind2.name); //bound gu