Question

我正在尝试在事件处理程序中使用JavaScript访问原型类的成员变量 - 我通常会使用“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的工作方式与我预期的完全相同（警告说“value”），但单击该链接会导致未定义的值，因为“this”关键字现在引用了事件目标（anchor（） HTML元素）。

我是原型JavaScript样式的新手，但在过去，使用闭包，我只是在构造函数中复制了“this”：

var that = this;

然后我可以通过“that”对象访问事件方法中的成员变量。这似乎不适用于原型代码。还有另一种方法可以达到这个目的吗？

感谢。

Answer 1

你需要：

this.link.onclick = this.EventMethod.bind(this);

...'bind'是Prototype的一部分，并返回一个函数，该函数使用'this'设置正确调用你的方法。

Answer 2

您的"that=this"关闭惯用法仍然适用：

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.

    };
}

Answer 3

你应该试试

this.link.onclick = this.EventMethod.bind(this);

Answer 4

如上所述，使用作为Prototype库一部分的bind是一种解决此问题的简洁方法。这个问题是另一个SO问题的重复，这里回答了bind方法的实现而不包括整个原型库：

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

使用JavaScript原型对象时，事件方法中的“this”关键字

4 个答案: