Accessing a class property in a callback function

Question

I got a little problem in my code. Here it is :

// We are in the constructor of my class
this.socket.emit('getmap', {name: name}, function(data){
    this.mapData = data.map;
    this.load();
});

The problem is that the mapData attribute isn't set, in fact, this refers to the namespace Socket. How can I access to this.mapData through this function ?

And sorry for my bad english ...

Answer 1

You need to save a reference to the this object. Inside the callback thiswill refer to the object on which the function has been called. A common pattern is this:

// We are in the constructor of my class
var self = this;
this.socket.emit('getmap', {name: name}, function(data){
    self.mapData = data.map;
    self.load();
});

Answer 2

You have to be aware of how JavaScript determines the value of this. In anonymous functions like the one you're using, it's usually the global namespace or window object on the web. In any case, I would just suggest you take advantage of the closure and use a variable in your constructor.

// We are in the constructor of my class
var _this = this;
this.socket.emit('getmap', {name: name}, function(data){
    _this.mapData = data.map;
    _this.load();
});