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

I have a class (or function-containing object; I've heard that there is no such thing as a Javascript class) called Foo, with an event handler that is attached to a click event. When the event handler is called, I want to modify a property of my class Foo. Normally, I would use the this keyword, but in the event handler, the this reference is set to the reference to the html element. Here is my code:

我有一个类（或者包含函数的对象;我听说没有Javascript类这样的东西）叫做Foo，它有一个附加到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.
    }
}

So my question is: how do I get a reference to my instance of Foo into my event handler so that I can modify its properties (like num)?

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

4 个解决方案

#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++;
    }
}

use a reference _self = this defined in the outer scope

使用引用_self = this在外部作用域中定义

#2

You need to bind the function's context; otherwise this will be the global object:

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

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

In a modern browser you can also use Function.prototype.bind:

在现代浏览器中，您还可以使用Function.prototype.bind：

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

#3

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

1) Use JQuery on() method to attach event listeners. 2) Use a reference _this for accessing parent class.

1）使用JQuery on（）方法附加事件侦听器。 2）使用引用_this来访问父类。

#4

You can store a reference to this in the constructor that you can access in your event handler.

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

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

#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++;
    }
}