0

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

我想要做的是在我的构造函数的原型对象中创建一个事件方法。这是我到目前为止所拥有的：

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 元素，称为作为参数传递给构造函数的任何内容。

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

我在这里做错了什么？

4

3 回答 3

2

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

尝试以下内容

function Controls(but) {
    var that = this;
    this.but = document.getElementById(but);
    this.but.onclick = function() {
        that.displayMessageTwo(); // that is closed-in
    }
}
于 2012-12-06T16:59:46.123 回答
2

我在这里做错了什么？

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

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);

但是对于较旧的、不支持的浏览器，它需要额外的代码。

于 2012-12-06T17:01:27.447 回答
0

我会认为：

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() {

使其为空...

于 2012-12-06T17:01:20.157 回答