Question

I am beginning to define classes in JavaScript, and I have a lot of troubles with the keyword this.

Here is an example of what I want to do:

function MyMap() {

    this.map = new google.maps.Map(....);

    google.maps.event.addListener(this.map, 'idle', function() {
        this.mapIdle();    // PROBLEM: "this" undefined
    });

    this.mapIdle = function() {
        google.maps.event.addListener(marker, 'click', function() {
            $("button").click(function() {
                $.ajax({
                    success: function() {
                        this.map.clearInfoWindows(); // PROBLEM: "this" undefined
                    }
                });
            });
        });
    }
}

As you can see in the comments, this won’t work here, because it is used inside a closure.

I have started using workarounds like:

var that = this;
google.maps.event.addListener(this.map, 'idle', function() {
    that.mapIdle();
});

Or even where you have to define a callback function around your callback function (seriously!!).

This is extremly ugly and doesn’t work everywhere. When I get a lot of nested lambda functions (as in the example I gave), I have no idea how to use a class attribute.

What is the best and most correct way to do that?

Answer 1

The easiest way is to define a self variable (or that, if you don’t mind a non-semantic variable name) as you already mentioned:

function MyMap() {
   var self = this;

   // in nested functions use self for the current instance of MyMap
}

Noting that you have to do it again for methods you add to the prototype (if they use nested functions):

MyMap.prototype.myMethod = function() {
   var self = this;
   // use self in nested functions
};

You should also read up on the .bind() method, noting that it doesn’t work for IE <= 8.

The question you linked to about defining a callback around your callback is to solve a different problem, i.e., setting up an appropriate closure structure to allow functions that are nested inside a loop to have access to the appropriate loop counter value(s). That has nothing to do with the this issue. (And can easily be combined with the self technique when needed.)