'this' Keyword Overriden In JavaScript Class When Handling JQuery Events

I have defined a class in JavaScript with a single method: function MyClass(text) { this.text = text; } MyClass.prototype.showText = function() { alert(this.text); } Then

Solution 1:

That's an expected behaviour, try:

function MyClass(text) {
    var self = this;

    this.text = text;
    $('#myButton').click(function () {
      self.button_click();
    });
}

or in newer browsers (using bind):

function MyClass(text) {
    this.text = text;
    $('#myButton').click(this.button_click.bind(this));
}

or using jquery proxy:

function MyClass(text) {
    this.text = text;
    $('#myButton').click($.proxy(this.button_click, this));
}

further reading:

• http://www.quirksmode.org/js/this.html

Solution 2:

this is determined when a function is called, not when it is defined. You have copied the function to the click handler, so when it is called it isn't associated with MyClass and this isn't what you want it to be.

You need to use a closure to store the value of this in a different variable.

function MyClass(text) {
    this.text = text;
    var self = this;
    var click_handler = function () { self.button_click(); };
    $('#myButton').click(click_handler);
}