Sign in to follow this  

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

This topic is 2812 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
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

This topic is 2812 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.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this