javascript - 如果我使用原型创建 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”）中，Messages.postResponse()当我将其称为this.postResponse(). 我也试过self.postResponse()没有成功。

我确定这是范围问题；我只是不确定如何引用实际对象。我需要设置var me = this和使用它还是什么？

谢谢你的时间！

Answer 1

正如您所说，问题在于click事件处理程序的上下文与其出现的函数不同。将函数绑定（ 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));
}