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

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

我会想：

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

使其空...

Answer 3

我在做什么错在这里？

您正在调用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老年人，不支持的浏览器。