Sign in to follow this  
chbrules

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

Recommended Posts

chbrules    170
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
29a    100
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
Anntor    254
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
ToohrVyk    1595
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
BeanDog    1065
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

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