<分区>
今天我在使用 Javascript 的 prototype 和 this 引用时遇到了一个非常奇怪的问题。
基本上，我有两个对象。一个对象使用 div 元素，并且可以在 div 上注册一个 onclick 事件。另一个对象利用此功能并使用第一个对象注册 onclick 事件。
代码如下:
我的第一个对象，负责处理 div:
DivObject = function() {};
DivObject.prototype.setClickListener = function(clickListener){
document.getElementById("myDiv").onclick = function(e){
clickListener(e);
};
};
我的第二个对象使用此功能:
MainObject = function(){
this.myString = "Teststring";
this.divObj = new DivObject();
this.divObj.setClickListener(this.handleClick);
};
MainObject.prototype.handleClick = function(e){
// do something with e
};
问题是，在 MainObject.prototype.handleClick 中，this 引用引用了 window 对象，而不是 主要对象。因此，此函数内的 console.log(this) 记录 [Object window]。
You can see this behaviour on jsfiddle.
作为解决方法，我使用 setClickListener 函数，如下所示:
var thisRef = this;
this.divObj.setClickListener(function(e){
thisRef.handleClick(e);
});
现在，我的 handleClick 函数中的 this 引用引用了我的 MainObject(如我所愿)。
See this workaround on jsfiddle.
我的问题是:
为什么 this 引用一次引用 window 对象而另一次引用我的对象的 this 引用？它在某处被覆盖了吗？我一直认为在我的对象中使用 this 我可以确定它真的是我对象的 this 引用吗？我现在使用的解决方法是应该如何解决这个问题，还是有任何其他更好的方法来处理这种情况？