如何在 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....})，您可以在 . done() 或 .error() 处理程序），或一种将实例的引用传递给处理程序而不使处理程序在实例化时执行的方法。例如，如果我尝试将 'this' 作为参数传递给 myHandler (myHandler=function(ref){}，然后更改：document.getElementById(id).onclick = this.myHandler(this);) 但是当你添加myHandler 的参数，该函数在类实例化时执行，而不是在单击时执行。

任何帮助将不胜感激。

Answer 1

代替...

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

... 和 ...

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

请参阅Crockford 的这篇文章。引用：

按照惯例，我们创建一个私有that变量。这用于使对象可用于私有方法。这是针对 ECMAScript 语言规范中的错误的解决方法，该错误导致this内部函数设置不正确。

另请参见'var that = this;' 是什么意思 在 JavaScript 中是什么意思？