함수 콜백 유효범위

게시자: 대문 demun 카테고리: 퍼블리셔/javascript 2014.06.05 06:00

콜백과 유효범위

이전글에서 다음과 같은 형태로 콜백을 실행했다고 가정하자.

callback(parameters);

위의 코드는 대부분 잘 동작하지만 콜백이 일회성의 익명함수나 전역 함수가 아니고 객체의 매서드인 경우도 많다.
만약 콜백 메서드가 자신이 속해있는 객체를 참조하기 위해 this를 사용하면 예상치 않게 동작할수 있다.

myapp라는 객체의 매서드인 paint()함수를 콜백으로 사용한다고 가정해보자.

var myapp = {};
myapp.color = "green";
myapp.paint = function (node) {
    node.style.color = this.color;
};

// findNodes() 함수는 이런식으로 동작한다
var findNodes() = function (callback) {
    // ....
    if (typeof callback === "function") {
        callback(found);
    }
    // ....
};

findNodes(myapp.paint)를 호출하면 this.color가 정의되지 않아 에상되로 동작하지 않는다.
findNodes()가 전역 함수이기 때문에 객체 this는 전역 객체를 참조한다.
findNodes() 가 (dom.findNodes()처럼) dom이라는 객체의 매서드라면, 콜백 내부의 this는 예상과는 달리 myapp가 아닌 dom을 참조하게 된다.

이 문제를 해결하기 위해서는 콜백 함수와 함께 콜백이 속해 있는 객체를 전달하면 된다.

findNodes(myapp.paint, myapp);

// 전달받은 객체를 바인딩하도록 findNodes() 또한 수정한다.
var findNodes = function (callback, callback_obj) {
    // ...
    if (typeof callback === "function") {
        callback.call(callback_obj, found);
    }
    // ...
}

출처 : JavaScript Patterns

신고

댓글