Variable scope of javascript class in callback function

Question

Possible duplicate:
In Javascript, why is the "this" operator incompatible?

I have the following class:

function Chat(some, nick, url) { this.socket = null; this.Nickname = nick; this.Url = url; this.Connect = function () { socket = io.connect(this.Url); socket.on('connect', function (data) { var p = this.Nickname; //this.Nickname is undefined why? // how can I acess to the Nickname variable or function? } }; } 

How can I access an instance variable or function from the connect callback function?

Answer 1

The easiest solution is to use that

 var that = this; //that is a normal variable //so it is lexically scoped //and can be used in inner functions socket.on('connect', function(data){ var p = that.NickName; }); 

Another possibility explicitly binds this value to the callback function

 socket.on('connect', function(data){ var p = this.Nickname; }.bind(this)); 

that three has the advantage of nesting as many callbacks as possible, and the binding version has the advantage that you can use "this" inside.

The disadvantage of the binding method is that it is not supported in IE <= 8, so you may need to use padding if you need to support older browsers.

edit: This answer is a bit outdated. Currently, you probably no longer need to worry about IE6, and you can use the thick arrow syntax that does not overwrite this .

Answer 2

The problem is that this value in javascript may vary depending on how the callback is called. The easiest way to get around this is to save the original this object to a local object named self . The local is captured in the callback and can be used to access member values. For instance.

 function Chat(some, nick, url) { var self = this; this.socket = null; this.Nickname = nick; this.Url = url; this.Connect = function () { socket = io.connect(this.Url); socket.on('connect', function (data) { var p = self.Nickname; //this.Nickname is undifined why? // how can I acess to the Nickname variable or function? } }; } 

Answer 3

You can change this: var p = this.Nickname; to this var p = nick;

Your problem is that this refers to the local scope of the function that you are using in the callback. This is not the scope of an external function.

Answer 4

"this" represents your function in this area.

try:

 function Chat(some, nick, url) { this.socket = null; this.Nickname = nick; this.Url = url; var that = this; this.Connect = function () { socket = io.connect(this.Url); socket.on('connect', function (data) { var p = that.Nickname; //this.Nickname is undifined why? // how can I acess to the Nickname variable or function? } }; } 

Note the assignment of "this" to "that"

Answer 5

JavaScript has a closure that is, to put it mildly, great.

Take a look at this question:

How do JavaScript locks work?

This should help you understand why everyone is telling you to put var something = this on a function and use something inside it to maintain a reference to the original this .

Answer 6

Here is a script that shows using a local copy of this:

http://jsfiddle.net/k7vC6/1/

In this case, this and self are the same thing, but using self safe.