Javascript get reference to parent object/class from event handler

Question

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:

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)?

Answer 1

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:

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

Answer 2

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

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