JavaScript Function binding

In JavaScript function binding happens using Bind() method. With this method, we can bind an object to a common function, so that the function gives different results when needed. otherwise, it gives the same result or gives an error while the code is executing. We use the Bind() method to call a function with this value, this keyword refers to the same object which is currently selected. In other words, the bind() method allows us to easily set which object will be bound by this keyword when a function or method is invoked. The need for bind usually occurs, when we use this keyword in a method and we call that method from a receiver object, then sometimes this is not bound to the object that we expect to be bound to. This results in errors in our program. Now, a simple program to print the name which is called by this keyword when the function printFunc() is invoked. 

javascript

let geeks = {
    name: "ABC",
    printFunc: function () {
        console.log(this.name);
    }
}

geeks.printFunc();

Output:

ABC

Here is no problem accessing the name “ABC”, this keyword binds the name variable to the function. It is known as default binding. this keyword refers to geeks object. Now see the below code, 

javascript

let geeks = {
    name: "ABC",
    printFunc: function () {
        console.log(this.name);
    }
}

let printFunc2 = geeks.printFunc;
printFunc2();

Output:

//no output is produced by this code//

Here we made a new variable function printFunc2 which refers to the function printFunc() of object geeks. Here the binding of this is lost, so no output is produced. To make sure that any binding of this is not to be lost, we are using Bind() method. By using the bind() method we can set the context of this to a particular object. So we can use other variables also to call the bound function. Use the bind() method in the previous example: 

javascript

let geeks = {
    name: "ABC",
    printFunc: function () {
        console.log(this.name);
    }
}

let printFunc2 = geeks.printFunc.bind(geeks);
//using bind()
// bind() takes the object "geeks" as parameter//
printFunc2();

Output:

ABC

The bind() method creates a new function where this keyword refers to the parameter in the parenthesis in the above case geeks. This way the bind() method enables calling a function with a specified this value. 

Example 4: In this example, there are 3 objects, and each time we call each object by using the bind()method. 

javascript

//object geeks1
let geeks1 = {
    name: "ABC",
    article: "C++"
}
//object geeks2
let geeks2 = {
    name: "CDE",
    article: "JAVA"
}

//object geeks3
let geeks3 = {
    name: "IJK",
    article: "C#"
}

function printVal() {
    console.log(this.name + " contributes about " +
                this.article + "<br>");
}

let printFunc2 = printVal.bind(geeks1);
//using bind()
// bind() takes the object "geeks1" as parameter//
printFunc2();

let printFunc3 = printVal.bind(geeks2);
printFunc3();

let printFunc4 = printVal.bind(geeks3);
printFunc4();
//uniquely defines each objects

Output: 

ABC contributes about C++
CDE contributes about JAVA
IJK contributes about C#