Jump to content
  • Advertisement
Sign in to follow this  
chbrules

[web] JS: Access class member using 'this' inside an anon function call in a class method

This topic is 3030 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I'm using jquery to make it easy for AJAX calls. So I create a class: function cMap(mapID){//vars and stuff} I go and prototype a function: cMap.prototype.loadMap = function(){ //jquery AJAX call } Now in the jquery $.ajax({...}); call, I use an anonymous function on the "success:" call: success: function(data){ this.member = data; } My problem is that inside this anonymous function call I'm trying to call a class member of my cMap class to store the data in from the AJAX call, but it's out of scope. So the JS console in FF/Chrome throws errors about bad value/doesn't exist. How can I access this class member from inside an anonymous function? Or at least what's a good way to go about doing all this? Thanks in advance! :D

Share this post


Link to post
Share on other sites
Advertisement
You'll have to use a closure.

Var me = this;

Var x =function () { me.x; }

Share this post


Link to post
Share on other sites
In jQuery 1.4 there is a function called proxy for exactly that purpose. Before that is just used something like smr describes.
Basically var self = this; and then just use self instead of this in the callback.

Share this post


Link to post
Share on other sites
Quote:
Original post by chbrules...Not really sure why it works, though. Seems kind of illogical.


You've likely used closures already by accident.

Read this for a comprehensive insight: javascript Closures

After you have familiarized yourself with the closure feature, and got used to it, coding as a lazy programmer in a language without this feature let you find it lacking in something. ;-)

Share this post


Link to post
Share on other sites
Quote:
Original post by chbrules
Not really sure why it works, though. Seems kind of illogical.


It is actually quite logical. In JS, this is a special variable, just like arguments, that is bound to the function in which it appears. So:

function a()
{
this; // from function a
arguments; // from function a

function b()
{
this; // from function b
arguments; // from function b
}

var obj = { f : b };
obj.f(1,2); // calls b with this == obj and arguments == [1,2]

}


Normal variables, however, exist in the scope they were defined in, as well as any scopes within that scope that do not re-define it. So that you achieve:

function a()
{
var self;
self; // from function a
function b()
{
self; // from function a
function c(self)
{
self; // from function c
}
}
}


Among other interesting things from JS, can you guess what the following prints?

for (var i = 0; i < 5; ++i)
{
setTimeout(function() { alert(i); }, i*1000);
}

Share this post


Link to post
Share on other sites
Quote:
Original post by ToohrVyk
Among other interesting things from JS, can you guess what the following prints?

for (var i = 0; i < 5; ++i)
{
setTimeout(function() { alert(i); }, i*1000);
}

I can't tell you how many times that very issue has gotten me. Although it's a little silly to apply the solution to this minor an example, the illustrative solution to binding down the current value of i is as follows:

for(var i = 0; i < 5; ++i) {
setTimeout(
(function(i) {
return function() {
alert(i);
}
})(i), i*1000);
}

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!