使用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方法的实现,而不包括整个原型库:

https://stackoverflow.com/a/2025839/1180286