javascript - 从回调调用方法时如何从方法中获取正确的类上下文

Question

我正在使用Class.js来创建类。

从回调函数调用时，我没有在方法中获得正确的上下文

我的代码是

WordCloud = MyClass.extend({
    init: function(data) {
        var me = this;
        (......).on("onComplete", this.draw);
    },
    show: function(word) {
        alert(word)
    },
    draw : function(words){
        console.debug(this); // prints element that triggred `onComplete` action
        console.debug(words); // "Hi"
        console.debug(me); // me is not defined
        me.show(words) // Need to call this method
    }
});

问题是draw方法在动作完成时被触发，但内部draw方法this不是实际的class实例，而是触发回调动作的元素。

我不能在调用时传递 exta 参数，this.draw因为它是一个回调函数并且onComplete只有一个参数。

我怎样才能调用该show方法draw？

Answer 1

如果您不必支持 Internet Explorer 8 或更低版本，则可以使用bind()：

init: function(data) {
    var me = this;
    (......).on("onComplete", this.draw.bind(this));
}

否则，如果您已经在使用 jQuery，则可以利用$.proxy()，其工作方式相同：

init: function(data) {
    var me = this;
    (......).on("onComplete", $.proxy(this.draw, this));
}

Answer 2

对于这些情况，我使用辅助函数。

function hitch(obj, func) {
    return function() {
        return obj[func].apply(obj, arguments || [])
    };
}

要调用它，您将使用hitch(this, 'draw');而不是this.draw.

或者为了更简单，您可以在基类中添加简化版本

function hitch(func) {
    var that = this;
    return function() {
        return that[func].apply(that, arguments || [])
    };
}

只是打电话this.hitch('draw');。