JavaScript | Function binding

In JavaScript function binding is happens using Bind() method. by this method, we can bind an object to a common function, so that the function gives different result when its need. 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 the this value, this keyword refers to the same object which is currently selected . In other words, bind() method allows us to easily set which object will be bound by the this keyword when a function or method is invoked.
The need for bind usually occurs, when we use the 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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
var geeks = {
name : "ABC",
printFunc: function(){
   document.write(this.name);}
   }
     
  geeks.printFunc();
</script>

chevron_right


Output:



ABC

Here is no problem to access the name “ABC”, this keyword bind the name variable to the function. It is known as default binding. this keyword refers geeks object.

Now see the below code,

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
var geeks = {
name : "ABC",
printFunc: function(){
   document.write(this.name);}
   }
     
  var printFunc2= geeks.printFunc;
  printFunc2();
</script>

chevron_right


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 bind() method we can set the context of this to a particular object. So we can use other variables also to call binded function.

Use bind() method in the previous example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
var geeks = {
name : "ABC",
printFunc: function(){
   document.write(this.name);}
   }
     
  var printFunc2= geeks.printFunc.bind(geeks);
   //using bind() 
   // bind() takes the object "geeks" as parameter//
  printFunc2();
</script>

chevron_right


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 is 3 objects, and each time we call each object by using bind()method.

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
//object geeks1
var geeks1 = {
name : "ABC",
article: "C++"
}
//object geeks2
  var geeks2 = {
name : "CDE",
article: "JAVA"
}
    
  //object geeks3
  var geeks3 = {
name : "IJK",
article: "C#"
}
  
function printVal(){
   document.write(this.name+" contributes about "+this.article+"<br>");
   }
        
  var printFunc2= printVal.bind(geeks1);
   //using bind() 
   // bind() takes the object "geeks1" as parameter//
  printFunc2();
    
  var printFunc3= printVal.bind(geeks2);
  printFunc3();
    
  var printFunc4= printVal.bind(geeks3);
  printFunc4();
  //uniquely defines each objects
</script>

chevron_right


Output:

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


My Personal Notes arrow_drop_up

3rd year student of Information Technology JADAVPUR UNIVERSITY

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.