클래스 라이브러리에서 범위 조절하기

이벤트 핸들러에서 함수를 처리할 때에 클래스의 범위를 유지할 수 있도록 클래스와 인스턴스 모두에 프록시 함수를 추가할 것이다.

var Class = function(parent) {
    var klass = function() {
        this.init.apply(this, arguments);
    };

    klass.prototype.init = function() {};
    klass.fn = klass.prototype;

    // 프록시 함수 추가
    klass.proxy = function(func) {
        var self = this;
        return(function() {
            return func.apply(self, arguments);
        });
    }

    // 인스턴스에도 함수를 추가
    klass.fn.proxy = klass.proxy;

    return klass;
}

var Button = new Class;

Button.include({
    init: function(element) {
        this.element = jQuery(element);

        // 클릭 함수 대신
        this.element.click(this.proxy(this.click));
    },
    click: function() {

    }
});

click() 콜백을 프록시로 감싸지 않으면 Button이 아닌 this.element 컨텍스트에서 click() 함수가 호출되면서 온갖 문제가 발생한다.

지정한 this 값의 컨텍스트에서 함수가 호출되도록 하려면 함수에 bind를 호출한다.

Button.include({
    init: function(element) {
        this.element = jQuery(element);

        // 클릭 함수를 바인드...
        this.element.click(this.click.bind(this));
    },
    click: function() {

    }
});

bind()는 이전에 살펴본 proxy() 함수와 같은 동작을 수행하므로 올바르 ㄴ컨텍스트에서 click() 함수를 호출할 수 있다.