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

IT技术 javascript events this
2021-02-03 10:56:22

我正在尝试在事件处理程序中访问 JavaScript 中原型类的成员变量——我通常会使用“this”关键字（或“that”[copy of 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 原型风格的新手，但在过去，使用闭包，我只是在构造函数中复制了“this”：

var that = this;

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

谢谢。

4个回答

你需要：

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

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

@Karl “访问事件接口”是指“接收事件对象作为参数”吗？该bind方法返回一个函数（带有一个固定的this），所以onclick = this.EventMethod与onclick = this.EventMethod.bind(this). 在这两种情况下，您都在onclick属性中存储了一个函数；它们在处理参数方面是相同的。如果您的问题更笼统地涉及如何将参数传递给侦听器函数，那么这与此处提出的问题完全不同，您应该提出一个新问题。
2021-03-23 10:56:22
如何onclick访问事件接口？
2021-03-30 10:56:22

你的"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.

    };
}

你应该试试

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

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

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

该问题使用 JQuery。我更愿意将纯 JavaScript 问题/答案视为标准。
2021-03-21 10:56:22
其它你可能感兴趣的问题
上一篇我可以在选择元素的选项中使用 HTML 标签吗？ 下一篇带有 ES6 / Bluebird Promise的对象方法