Function.prototype.bind

Modernizr 2.5 added lots of robust feature detects and tests, but perhaps its most convienent feature is the addition of a Function.prototype.bind polyfill. In short, .bind() allows you to set this within a function.

As I employ prototypal objects and class methods a lot, I’m using .bind() a bunch. It’s helpful within setTimeout:

function ClassAct() {
  this.generation = Math.floor( Math.random() * 10 + 4 );
  this.name = 'James J. Jones, the ' + this.generation + 'th.';
}

ClassAct.prototype.sayHello = function() {
  console.log('Gday! I am ' + this.name );
};

// old, ugly way
ClassAct.prototype.sayDelayedHello = function() {
  // can't use `this` in here, because it will be set to the `window` object
  // have to hack it with local `_this` var
  var _this = this;
  setTimeout( function() {
    _this.sayHello();
  }, 1000 );
};

// with Function.prototype.bind()
ClassAct.prototype.sayDelayedHello = function() {
  setTimeout( this.sayHello.bind( this ), 1000 );
};

Or, you could use it for quick and easy event handling:

function ClassAct() {
  // say hello on click
  // without .bind( this ), `this` in sayHello() will not be ClassAct instance
  document.addEventListener( 'mousedown', this.sayHello.bind( this ), false );
}

See it in action: here’s a fiddle to compare using .bind() within class methods: Without Function.prototype.bind and with Function.prototype.bind.