Firstly, I’m by no means a JavaScript programmer. I often write JavaScript, but it’s by necessity; never choice or want. However, I was reading a friends blog today, and as reached the end of the post, a little part of my soul died (sorry Greg). In Greg’s defence, it’s a small and perfectly innocous examaple, but it’s reminded me of working in JavaScript on relatively large classes where the entire native graph is being copied due to some programmers laziness. With that said, I think everybodies done it. Let’s take a look at the problem.

var module = {
  x: 81,
  getX: function() { return this.x; }
};

module.getX();      // returns 81; function is executed at the local scope
this.x = 9;         // assign x to 9 (globally)
var retX = module.getX;
retX();             // returns 9; function is executed at the global scope
this.x = 81;        // return back to 'normality'
var that = this;    // copy everything 
that.module.x = 9;  // modify our copied object
that.module.getX(); // we can get 9 on 'that'
this.x;             // and 81 on 'this'

However, with the above approach we now have ‘this’ and ‘that’ for the sake of manipulating scope (i.e. 2x the space, which is not that efficient.) - we can take advantage of a function that’s been around since 5.1 called bind; it looks a little like this:

var bind = function(fn, selfObj) {
  if(arguments.length > 2) {
    var boundArgs = Array.prototype.slice.call(arguments, 2);
    return function() {
      newArgs = Array.prototype.slice.call(arguments);
      Array.prototype.unshift.apply(newArgs, boundArgs);
      return fn.apply(selfObj, newArgs);
    };
  }
  return function() {
    return fn.apply(selfObj, arguments);
  };
};

With the above code in mind, let’s extend the example code:

bind(module, this).getX(); // 81
bind(module, that).getX(); // 9; but of course we no longer need 'that' as we can now pass 'this' scope more intelligently.

So, how to approach this problem when designing more complex code. Let’s put together some quick and nasty OO JS (I am writing this blog post on my phone, so don’t shoot me if this doesn’t compile – you should get the gist):

/* constructor */
var Game = function() {
    this.connections_ = [];	
    this.proxy = ... // let's pretend this calls in a blocking way
}

/* first function; scope is still simple */
Game.prototype.addSocket = function(ws) {
    var connection = new Connection(ws);
    connection.on('close', bind(this.removeConnection, this));
    this.connections_.push(ws);
};

/* second function, scope gets a little complex due to 
 * invocation of anonymous where we need to take 
 * advantage of our juicy bind function */
Game.prototype.removeConnection = function(connection) {
    bind(function() {
        this.proxy ... // accessible within correct scope
    }, this);
};

/* And incase it's not clear, let's look at the alternative */
Game.prototype.removeConnection = function(connection) {
    var that = this; // copies 'Game' object
    function() {
        that.proxy ... // accessible within 'that' scope
    }();
};

Anyway, that wraps up my rant.