Maintaining the reference to "this" in Javascript when using callbacks and closures

Question

I find myself assigning "this" to a variable so I can easily use it in callbacks and closures.

Is this bad practice? Is there a better way of referring back to the original function?

Here is a typical example.

User.prototype.edit = function(req, res) {

  var self = this,
      db = this.app.db;

  db.User.findById('ABCD', function(err, user)) {

    // I cannot use this.foo(user)
    self.foo(user);
  });
};

User.prototype.foo = function(user) {

};

Do you normally use this approach or have you found a cleaner solution?

Answer 1

There are three main ways to deal with this in callbacks:

1. Create a lexically-scoped variable, as you are currently doing

The two most common names for this new variable are that and self. I personally prefer using that because browsers have a global window property called self and my linter complains if I shadow it.

function edit(req, res) {
    var that = this,
    db.User.findById('ABCD', function(err, user){
        that.foo(user);
    });
};

One advantage of this approach is that once the code is converted to using that you can add as many inner callbacks as you want and they will all seamlessly work due to lexical scoping. Another advantage is that its very simple and will work even on ancient browsers.

2. Use the .bind() method.

Javascript functions have a .bind() method that lets you create a version of them that has a fixed this.

function edit(req, res) {
    db.User.findById('ABCD', (function(err, user){
        this.foo(user);
    }).bind(this));
};

When it comes to handling this, the bind method is specially useful for one-of callbacks where having to add a wrapper function would be more verbose:

setTimeout(this.someMethod.bind(this), 500);

var that = this;
setTimeout(function(){ that.doSomething() }, 500);

The main disadvantage of bind is that if you have nested callbacks then you also need to call bind on them. Additionally, IE <= 8 and some other old browsers, don't natively implement the bind method so you might need to use some sort of shimming library if you still have to support them.

3. If you need more fine-grained control of function scope or arguments, fall back to .call() and .apply()

The more primitive ways to control function parameters in Javascript, including the this, are the .call() and .apply() methods. They let you call a function with whatever object as their this and whatever values as its parameters. apply is specially useful for implementing variadic functions, since it receives the argument list as an array.

For example, here is a version of bind that receives the method to bind as a string. This lets us write down the this only once instead of twice.

function myBind(obj, funcname){
     return function(/**/){
         return obj[funcname].apply(obj, arguments);
     };
}

setTimeout(myBind(this, 'someMethod'), 500);

Answer 2

Unfortunately this is the well-established way to do this, although that is a widespread naming convention for this "copy".

You can also try:

db.User.findById('ABCD', this.foo.bind(this));

But this approach requires foo() to have exactly the same signature as the one expected by findById() (in your example you are skipping err).

Answer 3

You could create a proxy for the callback with:

var createProxy = function(fn, scope) {
  return function () {
    return fn.apply(scope, arguments);
  }; 
};

Using this, you could do the following:

db.User.findById('ABCD', createProxy(function(err, user)) {
  this.foo(user);
}, this));

jQuery does something similar with: $.proxy

And, as others have noted using bind, have a look here if compatibility is an issue:

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind#Compatibility