콜백함수에서의 this

예제 4-8) 콜백 함수 내부의 this에 다른 값을 바인딩하는 방법(1) - 전통적인 방식

var obj1 = {
    name: 'obj1',
    func: function () {
        var self = this;
        return function () {
            console.log(self.name);
        };
    }
};

var callback = obj1.func();
setTimeout(callback, 1000); // 1초 뒤 'obj1' 객체 출력

 

예제 4-8의 func 함수 재활용

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

var callback2 = obj2.func();
setTimeout(callback2, 1500); // 1.5초 후 'obj2' 객체 출력

var obj3 = { name: 'obj3' };
var callback3 = obj1.func.call(obj3); // obj1의 func을 obj3을 this로 설정하여 호출
setTimeout(callback3, 2000); // 2초 후 'obj3' 출력

 

this를 우회적으로나마 활용함으로써 다양한 상황에서 원하는 객체를 바라보는 콜백 함수를 만들 수 있는 방법임.

 

 

 

 

예제 4-9) 콜백 함수 내부에서 this를 사용하지 않은 경우

var obj1 = {
    name: 'obj1',
    func: function () {
        console.log(obj1.name);
    }
};
setTimeout(obj1.func, 1000); // 1초 뒤 'obj1' string 출력

 

반면 예제 4-9의 경우 obj1.name으로 하드코딩했기 때문에 다른 객체를 바라보게 할 수 없음.

 

 

ES5에서 새로 나온 bind 함수 활용

 

예제 4-11) 콜백 함수 내부의 this에 다른 값을 바인딩하는 방법(2) - 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' 출력