Getting context from an object inside a callback in Javascript

Question

I have a case where I have an object, "foo", that needs to call a callback on another object, "bar", and I need the context within the callback to be that of "bar". The kicker though, is that beyond getting its callback from "bar", "foo" should not know anyting about it.

Example:

var foo = 
{
    message: "Hello foo",
    doStuff: undefined
};

var bar =
{
    message: "Hello bar",
    callback = function ()
    {
        alert(this.message);
    }

};

foo.doStuff = bar.callback;

foo.doStuff();

I realize that normally you would use "call" or "apply" to switch the context to bar but in my particular case, at the time of calling foo.doStuff() I no longer have information about where the callback came from. So is there another way of figuring the context (say from within the callback function itself)?

foo.doStuff = bar.callback.bind(bar);. or foo.doStuff = function () {bar.callback.call(bar)}; which is basically what bind is doing behind the scenes. — Paulo R.
– Paulo R., Commented Nov 21, 2012 at 19:12
bar.callback.call(bar) is functionally identical to bar.callback(). — Alex Wayne
– Alex Wayne, Commented Nov 21, 2012 at 19:24

Alex Wayne · Accepted Answer · 2012-11-21 19:22:23Z

1

So is there another way of figuring the context (say from within the callback function itself)?

Nope. Not without some extra specific before you pass the callback. If all you have is a function reference, you typically have no context. But with some prep, there are some solutions.

You could wrap the callback. When this is invoked, bar.callback() will be called in it's full form, preserving the context of bar.

foo.doStuff = function() { bar.callback(); };

Or in modern JS engines you can bind the callback to a specific context.

foo.doStuff = bar.callback.bind(bar);

Or use underscore.js to do that in all JS engines.

foo.doStuff = _(bar.callback).bind(bar);

Or make your own bind function if you want compatibility with old engines and dont want to use a whole library for it.

var bind = function(fn, context) {
  return function() {
    fn.call(context);
  };
};
foo.doStuff = bind(bar.callback, bar);

All that said, a simple wrapper is usually the simplest and most common. It's got few drawbacks, it's fast, easy to understand, and gives you lots of control over what gets invoked with what arguments. In this case, this form makes the most sense I think.

foo.doStuff = function() { bar.callback(); };

edited Nov 21, 2012 at 19:22

answered Nov 21, 2012 at 19:16

Alex Wayne

188k52 gold badges328 silver badges363 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1601333 Over a year ago

Thank you, bind is exactly what I was looking for. Wrapping in a function would probably work as well but as I am retrieving the callbacks dynamically I do not know what parameters need to be passed (until that function is called) and so I can't provide them at the point of assigning the callback to the other object. The only scary part is MDN says that Safari mobile does not support bind (although some quick tests using jsfiddle seemed to prove otherwise...). At worst though, I will just have to add a polyfill to get it to work.

glkz · Accepted Answer · 2012-11-21 19:47:53Z

1

Use closure for bar.

var foo = {
    message: "Hello foo",
    doStuff: undefined
};

var bar = (function() {
    var message = "Hello bar";
    return {
        callback: function() {                
            alert(message);
        }
    };
})();


foo.doStuff = bar.callback;
foo.doStuff();

jsfiddle

answered Nov 21, 2012 at 19:47

glkz

1013 bronze badges

Comments

Martin Vézina · Accepted Answer · 2012-11-21 19:24:35Z

0

I'd do it with a closure.

foo.doStuff = function(){
  bar.callback();
};

If you fear that the value of bar is changed between the moment you create the callback and the moment it is executed, you could "lock" the value of bar, but that might be overkill

foo.doStuff = (function(bar){
  return function(){
    bar.callback();
  }
})(bar);

answered Nov 21, 2012 at 19:24

Martin Vézina

3192 silver badges8 bronze badges

Collectives™ on Stack Overflow

Getting context from an object inside a callback in Javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related