Javascript get reference to parent object/class from event handler

class, javascript, jquery, jquery-events, oop

Solution

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

Problem

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

Original source