'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:

functionMyClass(text) {
    var self = this;

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

or in newer browsers (using bind):

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

or using jquery proxy:

functionMyClass(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.

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