javascript - 如果我使用原型(prototype)创建 OOP JS 代码，如何从循环引用类方法？

Question

我首先向您展示我的代码:

function Messages(){
    this.postResponseButton = '#postResponseButton';
    $(document).ready(this.setEvents);
}
Messages.prototype.setEvents = function(){
    $(self.postResponseButton).click(function(){
        this.postResponse(); // ERROR HERE
    });
}
Messages.prototype.postResponse = function(){
    console.log('Post Response');
}
var messages = new Messages();

在标记行(“ERROR HERE”)中，当我将其称为 this.postResponse() 时，它无法识别 Messages.postResponse() 函数。我也尝试过 self.postResponse() 但没有成功。

我确信这是一个范围问题；我只是不确定如何引用实际对象。我需要设置 var me = this 并使用它吗？

感谢您的宝贵时间!

Answer 1

正如您所说，问题在于 click 事件处理程序的上下文与其出现的函数不同。要么 bind (ES5，在旧浏览器中不起作用)this 的函数:

Messages.prototype.setEvents = function(){
    $(self.postResponseButton).click(function(){
        this.postResponse();
    }.bind(this));
}

或者保存对this的引用并使用它:

Messages.prototype.setEvents = function(){
    var that = this;
    $(self.postResponseButton).click(function(){
        that.postResponse();
    });
}

第三种选择是使用 $.proxy ，它实际上是 Function.prototype.bind 的别名，包括旧浏览器的后备:

Messages.prototype.setEvents = function(){
    $(self.postResponseButton).click($.proxy(function(){
        this.postResponse();
    }, this));
}