콜백 함수 내부의 this에 다른 값 바인딩하기

그렇다면 객체의 메서드를 콜백 함수로 넘긴 경우 this 가 객체를 바라보게 하려면?

1. this 를 다른 변수에 담아 콜백 함수로 활용할 함수에서 그 변수를 대신 사용, 이를 클로저로 만듦

    var obj1 = {
      name: "obj1",
      func: function () {
        var self = this;
        return function () {
          console.log(self.name);
        }
      }
    };
    var callback = obj1.func();
    setTimeout(callback, 1000);
   

2. this를 쓰지 않고 obj1을 참조하면 되긴 하는데.. 재활용을 못해요.

3. 구리게 재활용하는법

    var obj1 = {
      name: "obj1",
      func: function () {
        var self = this;
        return function () {
          console.log(self.name);
        }
      }
    };
    var callback = obj1.func();
    setTimeout(callback, 1000);
   
    var obj2 = {
      name: "obj2",
      func: obj1.func // obj2의 func를 obj1의 func로 지정 => this가 obj2가 됨
    };
    var callback2 = obj2.func(); // function () {console.log(self.name);} (self: obj2)
    setTimeout(callback2, 1500);
   
    var obj3 = {name: "obj3"};
    var callback3 = obj1.func.call(obj3); // function () {console.log(self.name);} (self: obj3)
    setTimeout(callback3, 2000);
   

4. (비교적) 아름답게 재활용하는법

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