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

问：

我正在尝试在事件处理程序中访问 JavaScript 原型类的成员变量——我通常会使用“this”关键字（或者在事件处理程序的情况下使用“that”[副本]）。不用说，我遇到了一些麻烦。

以以下 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”关键字现在引用事件目标（锚点（） HTML 元素）。

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

var that = this;

然后，我可以通过“that”对象访问事件方法中的成员变量。这似乎不适用于原型代码。有没有其他方法可以实现这一目标？

谢谢。

JavaScript 事件 this

@Michael：是的，但这并不重要。骗子是按答案的质量而不是按日期结束的;我链接的那个是关于失去的规范问题.我不确定它是否是“确切”的副本，这就是为什么我没有关闭它，而只是发表评论。该链接对访问此问题的每个人绝对有帮助。this

答：

9赞 Crescent Fresh 9/3/2009 #1

您的关闭成语仍然适用："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.

    };
}

5赞 alex.zherdev 9/3/2009 #2

你应该试试

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

13赞 ijw 9/3/2009 #3

你需要：

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

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

@Karl “访问事件接口”是指“接收事件对象作为参数”吗？该方法返回一个函数（具有固定的函数），因此与基本相同。在这两种情况下，您都将函数存储在属性中;它们在处理参数的方式上是相同的。如果你的问题更笼统地是关于如何将参数传递给侦听器函数，那么这是一个与这里提出的问题完全不同的问题，你应该问一个新问题。bindthisonclick = this.EventMethodonclick = this.EventMethod.bind(this)onclick

0赞 st0ne 10/25/2013 #4

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

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

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

"this" keyword in event methods when using JavaScript prototype object

评论

评论

评论