자바스크립트 입문_콜백함수(callback function) 내부의 this에 다른 값 바인딩 하기

(본 포스팅은 위키북스의 '코어자바스크립트' 책을 공부하면서 작성되었습니다_내돈내산)

 

• 콜백함수로 어떤 메서드가 작동하는 경우 그 메서드는 기존의 객체와의직접적인 연관이 없어지고, 별도로 this를 지정하는 인자를 정하지 않는 이상 함수내부에서의 this는 전역객체를 바라보게 됨.
• 전통적으로는 this를 다른 변수에 담아 콜백함수로 활용할 함수에서는 this대신 그 변수를 사용하게 하고, 이를 클로저로 만드는 방식이 쓰였음.
  
  ** 클로저 : 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가리킴.

- 클로저를 사용하는 방식 -

var obj1 = {
  name: 'obj1',
  func: function() {
    var self = this;		// this를 self에 할당해서 내부함수에서 사용할 수 있도록 함.
    return function() {       	// 클로저 기법 사용
      console.log(self.name);
    };
  }
};

var callback = obj1.func();
setTimeout(callback, 1000);

• this를 사용하지 않고도 코드를 바로 작성할 수 있지만( this를 self에 할당하는 과정대신 바로 obj1을 할당) 그렇게 코딩을 할 경우 코드의 재사용성이 떨어지게 됨. this가 들어간 코드를 이용해 코드의 재사용성이 높여진 예를 볼 수 있음.

---

var obj1 = {
  name: 'obj1',
  func: function() {
    var self = this;
    return function() {       // 클로저 기법 사용
      console.log(self.name);
    };
  }
};

var obj2 = {
  name: 'obj2',
  func: obj1.func,
}

var callback2 = obj2.func();
setTimeout(callback2, 1500);

• 위처럼 this로 지정된 값을 이용하면 다양한 코드에서 다양한 결과를 낼 수 있음. 
• 이러한 전통적인 방법을 보완하는 방법으로 bind 메서드를 이용할 수 있음.

- bind 메서드 활용 -

var obj1 = {
  name: 'obj1',
  func: function() {       
      console.log(this.name);
  }
};
setTimeout(obj1.func.bind(obj1), 1000);       // obj1

var obj2 = {name:'obj2'};
setTimeout(obj1.func.bind(obj2), 1500);       // obj2