使用JavaScript原型对象时,事件方法中的“this”关键字
我试图在事件处理程序中访问JavaScript中的原型类的成员variables – 我通常使用“this”关键字(或“在事件处理程序的情况下, 。 不用说,我遇到了一些麻烦。
举个例子,这个HTML片段:
<a id="myLink" href="#">My Link</a>
而这个JavaScript代码:
function MyClass() { this.field = "value" this.link = document.getElementById("myLink"); this.link.onclick = this.EventMethod; } MyClass.prototype.NormalMethod = function() { alert(this.field); } MyClass.prototype.EventMethod = function(e) { alert(this.field); }
实例化一个MyClass对象并调用NormalMethod就像我期望的那样工作(警告说“值”),但点击链接会导致一个未定义的值,因为“this”关键字现在引用事件目标(anchor()HTML元素) 。
我对JavaScript风格的原型还不熟悉,但是在过去,通过closures,我只是在构造函数中创build了一个“this”的副本:
var that = this;
然后我可以通过“that”对象访问事件方法中的成员variables。 这似乎不适用于原型代码。 有没有另一种方法来实现这一目标?
谢谢。
你的"that=this"
closures习惯用法还是适用的:
function MyClass() { ... var that = this; this.link.onclick = function() { return that.EventMethod.apply(that, arguments); // that.EventMethod() works too here, however // the above ensures that the function closure // operates exactly as EventMethod itself does. }; }
你需要:
this.link.onclick = this.EventMethod.bind(this);
…'bind'是Prototype的一部分,并返回一个函数,用正确设置'this'来调用你的方法。
你应该试试
this.link.onclick = this.EventMethod.bind(this);
如上所述,使用作为Prototype库的一部分的bind是解决这个问题的一种简单方法。 这个问题是另一个SO问题的重复,在这里回答了bind方法的实现,而不包括整个原型库: