Javascript 从事件处理程序中获取对父对象/类的引用答案

【问题标题】：Javascript get reference to parent object/class from event handlerJavascript 从事件处理程序中获取对父对象/类的引用
【发布时间】：2012-05-26 05:36:55
【问题描述】：

我有一个名为 Foo 的类（或包含函数的对象；我听说没有 Javascript 类之类的东西），它带有一个附加到单击事件的事件处理程序。当调用事件处理程序时，我想修改我的类 Foo 的属性。通常，我会使用this 关键字，但在事件处理程序中，this 引用设置为对 html 元素的引用。这是我的代码：

function Foo() {

    this.num=0;
    $('element').click(this.eventHandler);// jQuery to attach an onclick event to my element.

    this.eventHandler=function() {
        this.num++;// This doesn't work.
        // Normally, "this" would refer to my instance of Foo,
        // but as an event handler, "this" refers to the html element.
    }
}

所以我的问题是：如何将我的 Foo 实例引用到我的事件处理程序中，以便我可以修改它的属性（如 num）？

【问题讨论】：

标签： javascript jquery class oop jquery-events

【解决方案1】：

function Foo() {
    var _self = this;
    this.num=0;

    $('element').click(this.eventHandler);// jQuery to attach an onclick event to my element.

    this.eventHandler=function() {
        _self.num++;
    }
}

使用在外部范围中定义的引用_self = this

【讨论】：

如果需要释放对象，这个解决方案会不会导致内存泄漏？

【解决方案2】：

您可以在构造函数中存储对 this 的引用，您可以在事件处理程序中访问该引用。

function Foo() {

    this.num=0;
    $('element').click(this.eventHandler);// jQuery to attach an onclick event to my element.

    var that = this;
    this.eventHandler=function() {
        that.num++;// This doesn't work.
    }
}

【讨论】：

【解决方案3】：

你需要绑定函数的上下文；否则this 将是全局对象：

$('element').click($.proxy(this.eventHandler, this));

在现代浏览器中你也可以使用Function.prototype.bind:

$('element').click(this.eventHandler.bind(this))

【讨论】：

这应该是公认的答案。它更健壮，因为关闭并不总是一种选择。

【解决方案4】：

function Foo() {
   this.num=0;
   $(document).on('click', 'element', this, this.eventHandler);
   this.eventHandler=function(e) {
      var _this = e.data; 
      _this.num++;
   }
}

1) 使用 JQuery on() 方法附加事件监听器。 2) 使用引用 _this 来访问父类。

【讨论】：