6

考虑以下 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 的参数，该函数在类实例化时执行，而不是在单击时执行。

任何帮助将不胜感激。

4

3 回答 3

4

代替...

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

... 和 ...

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

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

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

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

于 2013-10-27T22:36:26.073 回答
2

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

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

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

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

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

为了更深入地解释函数是如何this工作的，MDN 有一篇关于this关键字的好文章。

于 2013-10-27T22:09:37.157 回答
0

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

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

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

于 2013-10-27T22:05:32.223 回答