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

我有一个名为Foo的类（或包含对象的函数；我听说没有Javascript类），带有一个附加到click事件的事件处理程序。调用事件处理程序时，我想修改我的类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

）

---

使用在外部作用域中定义的引用

\u self=this

您可以将对

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.
    }
}

---

您需要绑定函数的上下文；否则，

此

将是全局对象：

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

在现代浏览器中，您还可以使用

Function.prototype.bind

：

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

1） 使用JQuery on（）方法附加事件侦听器。

---

2） 使用此引用访问父类

如果需要释放对象，该解决方案是否会导致内存泄漏？这应该是公认的答案。它更加健壮，因为闭包并不总是一种选择。

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

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