bind

bind creates a new function and sets it's scope.

We use .bind() to create a new function and then set it's scope to be bound to whatever was passed to bind.

this code

var myObj = {
  specialFunction: function () {},

  anotherSpecialFunction: function () {},

  getAsyncData: function (cb) {
    cb();
  },

  render: function () {
    var that = this;
    this.getAsyncData(function () {
      that.specialFunction();
      that.anotherSpecialFunction();
    });
  },
};

myObj.render();

and this code achieve the same

render: function () {

    this.getAsyncData(function () {

        this.specialFunction();

        this.anotherSpecialFunction();

    }.bind(this));

}

.bind() simply creates a new function that, when called, has its this keyword set to the provided value. So, we pass our desired context, this (which is myObj), into the .bind() function. Then, when the callback function is executed, this references myObj.

var foo = {
  x: 3,
};

var bar = function () {
  console.log(this.x);
};

bar(); // undefined

var boundFunc = bar.bind(foo);

boundFunc(); // 3

.bind(), .apply() and .call() are all methods used to set the scope of a function. call and apply are immediately executed whereas bind let's you call the function at a later time. bind sets the scope but doesn't execute the function.

Links

• Smashing Magazine: Understanding Prototype.bind
• JavaScript: bind function