如何在 JavaScript 中使用类方法作为 onclick 处理程序？

Question

考虑以下 Javascript 类：

function ClassA() {
 this.someVariable = someValue;
 this.myHandler = function(){
   // I WANT TO CALL InnerFunction
   this.innerFunction();
 };

 this.innerFunction = function(){
   // do something that accesses/manipulates someVariable
 };

 this.hookUp = function(id){
   document.getElementById(id).onclick = this.myHandler;
 };
};
...
...
var button = document.createElement('button');
button.setAttribute('id','mybuttonid');
// append button to the document
...
...
var x = new ClassA();
x.hookUp('mybuttonid');

当我单击按钮时，处理程序会执行，但是，'this' 现在指的是按钮元素而不是 ClassA 对象，因此它无法解析 innerFunction()。

我需要一种方法来向处理程序表明 this 的上下文是 ClassA 的实例（类似于 $.ajax({context: this....}) ，您可以在其中使用“this”在 .done() 或 .error() 处理程序中），或者一种将实例的引用传递给处理程序而不使处理程序在实例化时执行的方法。例如，如果我尝试将“this”作为参数传递给 myHandler（myHandler=function(ref){}，然后更改：document.getElementById(id).onclick = this.myHandler(this);） 但是当您向 myHandler 添加参数时，该函数会在类实例化时执行，而不是在单击时执行。

任何帮助将不胜感激。

Answer 1

这是一个通常使用所谓的“代理模式”来解决的问题。

我认为这会有所帮助（-！

http://addyosmani.com/resources/essentialjsdesignpatterns/book/#proxypatternjquery

Answer 2

就像您已经发现的那样，this 的值取决于方法的调用方式。因此，在附加到 DOM 元素的事件处理程序中使用 this 时可能会造成混淆。

相反，在添加处理程序时，请使用匿名方法以及闭包中的变量。

例如，将您的连接函数更改为：

this.hookUp = function(id) {
    var _this = this;
    document.getElementById(id).onclick = function() {
      _this.innerFunction();
    }
}

请注意，您不再依赖 onclick 处理程序中的this，从而避免了该问题。进入innerFunction 后，您可以像往常一样继续使用this，因为它现在正确指向正确的对象。

关于this如何在函数中工作的更深入的解释，MDN有一个很好的article about the this keyword.

Answer 3

替换...

this.myHandler = function(){
    this.innerFunction();
};

...与...

var self = this;
this.myHandler = function() {   
    self.innerFunction();
};

见this article by Crockford。引用：

按照惯例，我们创建了一个私有的that 变量。这是用来制作 私有方法可用的对象。这是一种解决方法 ECMAScript 语言规范中的错误导致this 内部函数设置错误。

另见What does 'var that = this;' mean in JavaScript?