Accessing class member variables inside an event handler in Javascript

Question

I have a quick question regarding the proper way to access Javascript class member variables from inside of an event handler that class uses. For example:

function Map() {
    this.x = 0;
    this.y = 0;

    $("body").mousemove( function(event) {
        this.x = event.pageX;     // Is not able to access Map's member variable "x"
        this.y = event.pageY;     // Is not able to access Map's member variable "y"
    });
}

Rather than changing the member variable of the "Map" class, the "this.x" in the event handler tries to affect the "x" member variable of the element that triggered the event. What is the proper way to access the member variables of the "Map" class from within the event handlers?

Any help would be greatly appreciated - I've been sort of scratching my head at this one.

Cheers, Charlie

Answer 1

Since this changes in an event context (points to global usually), you need to store a reference to yourself outside of the event:

function Map() {
    this.x = 0;
    this.y = 0;
    var _self = this;
    $("body").mousemove( function(event) {
        _self.x = event.pageX;     // Is now able to access Map's member variable "x"
        _self.y = event.pageY;     // Is now able to access Map's member variable "y"
    });
}

Answer 2

The solution that Matt gave it probably the way to go.

Just thought I'd point out that you can pass data via the event object like this:

function Map() {
    this.x = 0;
    this.y = 0;

// Pass object with data-------------v
    $("body").bind('mousemove', {ths: this}, function(event) {
            // access this via event.data
        event.data.ths.x = event.pageX;
        event.data.ths.y = event.pageY;     
    });
}

This is just for the info. It is really not a practical application. Matt's reference to a local variable makes more sense.

Answer 3

You can also use JQuery.proxy, to create a proxy function with its context. You can than bind the proxy to events.

Here is an example:

var init_handler  =  $.proxy(this.init, this);
$('#page_id').bind('pageinit', init_handler);