Question

我觉得我所拥有的是正确的代码，但显然我在这里遗漏了一些东西。

我要做的是在构造函数的原型对象中创建一个事件方法。以下是我到目前为止的情况：

function Controls(but) {
    this.but = document.getElementById(but);
    this.but.onclick = function() {
        displayMessageTwo();
    }
}

Controls.prototype.displayMessageTwo = function() {
    alert("HELLO");
}

var Main = new Controls('testingTwo');

我的逻辑是，我正在创建一个构造函数，从中构建控件（让我们说幻灯片）... this.but等于链接的html元素，调用任何作为参数传递给构造函数

在我的原型对象中，我定义了我的方法，然后创建了我的对象。但是，这不像我预期的那样有效。

我在这里做错了什么？

Answer 1

我怀疑当事件处理程序触发时，调用的上下文不是您注册回调的实例。

尝试类似以下内容

function Controls(but) {
    var that = this;
    this.but = document.getElementById(but);
    this.but.onclick = function() {
        that.displayMessageTwo(); // that is closed-in
    }
}

Answer 2

我在这里做错了什么？

您正在调用displayMessageTwo();，就像它是一个全局函数一样。它不是，它是您实例上的继承属性。通常你会引用this keyword的实例，但在事件处理程序中你不能。创建一个引用该对象的变量，并像这样调用那个方法：

function Controls(but) {
    this.but = document.getElementById(but);

    var that = this;
    this.but.onclick = function() {
        that.displayMessageTwo();
    }
}

由于您的displayMessageTwo方法不关心其上下文（不通过this引用其他属性），您甚至可以直接指定它：

    this.but.onclick = this.displayMessageTwo;

但我建议避免这种情况，应始终使用正确的thisValue执行方法。您也可以使用bind：

    this.but.onclick = this.displayMessageTwo.bind(this);

但对于较旧的，不支持的浏览器，它需要additional code。

Answer 3

我想：

function Controls(but) {
    this.but = document.getElementById(but);
    this.but.onclick = this.displayMessageTwo;
}

Controls.prototype.displayMessageTwo = function() {
    alert("HELLO");
}

var Main = new Controls('testingTwo');

更清晰（指定分配给prototype.displayMessageTwo的函数）。如果这不起作用，可能是因为

 this.but.onclick = this.displayMessageTwo;

之前评估

：

 Controls.prototype.displayMessageTwo = function() {

将其设为空...

从原型对象继承的JavaScript事件方法

3 个答案: