The Binding Concept in Javascript

Javascript binding is done using the Bind() method. With the help of the bind method, we can make one common function and bind different objects, so that the function gives different results when it's needed. Otherwise, it gives the same result or gives an error while the code is executing.

In short, when a function or method is invoked, the bind() method allows us to easily set which object will be bound by this keyword.

var info= {
name : "XYZ",
printFunc: function(){
document.write(this.name);} // XYZ
}
info.printFunc();

In the above example, there is no problem accessing the name, this keyword bind the name variable to the function. This is called default binding.

This keyword will here point to object i.e info object.

var info = {
name : "XYZ",
printFunc: function(){
    document.write(this);// window object or undefined(strict mode).
    document.write(this.name);
  }
}
var printFunc2= info.printFunc;
printFunc2();

In the above example, we are storing a reference of info.printFunc to printFunc2 variable. After that, we are calling it without an object reference, so this will now refer to the window (global) object or undefined (in strict mode). Hence, the binding of this is lost, so no output is produced.

So basically, the Bind() method is used so that binding of this is not lost.
By using bind() method we can set the context of this or in simple terms we can bind this to a particular object.

How to use bind?

1. The bind() method creates a new function, when invoked, has the this sets to the provided value. See example below:-

var car1 = {
  name : "swift",
  color: "red",
}
var car2 = {
  name : "alto",
  color: "blue",
}
function infoFunc() {
   document.write(this.name + " " + this.color + "<br/>");
 }
infoFunc.bind(car1)(); // swift red
infoFunc.bind(car2)(); // alto blue

There is one common function infoFunc() which is invoked 2times with different objects so that different results are produced. This first binds to car1 object and then to car2 object.

2. Function borrowing which means the bind() allows an object to borrow a method from another object without making a copy of that method.

let runner = {
    name: 'Runner',
    run: function(speed) {
        document.write(this.name + ' runs at ' + speed + ' mph.');
    }
};
let flyer = {
    name: 'Flyer',
    fly: function(speed) {
        document.write(this.name + ' flies at ' + speed + ' mph.');
    }
};
let run = runner.run.bind(flyer, 20);
run(); //Flyer runs at 20 mph.

The flyer object is able to run, using the bind() method. The method creates the run() function with the this sets to the flyer object.

How Binding came into existence?

To set the this keyword independent of how the function is called, we use call, bind, and apply methods.

These methods allow us to write a function once and invoke it in a different context. They all attach this into a function (or object) and the difference is in the function invocation. In other words, they allow us to specify the value of this which will be used while the function is being executed. They also take any parameters to be passed to the original function when it is invoked.