Question

Background: I am building a webapp that makes use of JQuery and the Facebook Javascript API. Since some users don’t like Facebook, I have also built a thunking layer that emulates the necessary identity APIs for users who prefer not to use Facebook. To keep things clean and avoid code duplication, I have organized my Javascript code into a few classes.

Both Facebook and JQuery APIs make extensive use of callbacks. Since all of my functions are bound into objects, I found that I am using the following pattern frequently:

var obj_ref = this;
some_jquery_function_that_takes_a_callback(/* various args */,
    function() { obj_ref.my_callback_method(); });

For readability, the obj in obj_ref is actually the name of the class.

Is there some nifty Javascript magic that is simpler or clearer, or is this as good as it gets?

Update: Some good commentary so far in the answers. I should have added that my callback methods generally needs to refer to variables or functions bound to the class. If I don’t need that, then the anonymous function wrapper is unnecessary.

Update2: I’ve selected a best answer, but you should carefully read all of the answers. Each provides some useful insight into possible solutions.

Answer 1

If you need your this to be your obj_ref and you can assume an update to date JavaScript (which sadly you probably can’t), you could use bind to do away with the wrappers:

Creates a new function that, when called, itself calls this function in the context of the provided this value, with a given sequence of arguments preceding any provided when the new function was called.

Then you could bind your methods to your objects and this:

some_jquery_function_that_takes_a_callback(/* various args */,
    function() { obj_ref.my_callback_method(); });

would be the same as:

// In some initialization pass...
obj_ref.my_callback_method = obj_ref.my_callback_method.bind(obj_ref);

// And later...
some_jquery_function_that_takes_a_callback(/* various args */,
    obj_ref.my_callback_method);

Then this would be obj_ref when my_callback_method is called.

Alternatively, you could pull in Underscore.js and use its bind or bindAll. You could always grab just bind or bindAll out of Underscore.js if you didn’t want the whole thing.

Or, since you have jQuery in play already, you could use $.proxy in place of the standard bind:

Takes a function and returns a new one that will always have a particular context.

So you could do it like this:

// In some initialization pass...
obj_ref.my_callback_method = $.proxy(obj_ref.my_callback_method.bind, obj_ref);

// And later...
some_jquery_function_that_takes_a_callback(/* various args */,
    obj_ref.my_callback_method);

Thanks to dsfq for reminding me about jQuery’s version of bind.