Javascript Call Apply Bind

introduction

1Call , Apply and Bind methods are used to store the object reference in 'this' keyword of function.
2When function's 'this' have reference of object, then we can access states and behaviours of that object.

For practice we will use these objects as reference.

1let human1 = {
2  name: "Chombi",
3  age: 20,
4};
5
6let human2 = {
7  name: "Dinga",
8  age: 19,
9};
10
11let human3 = {
12  name: "Nimbi",
13  age: 18,
14};

Below function we will use to access object's properties by using call, apply and bind methods.

1function detailsAll(a, b, c) {
2  console.log("Name : " + this.name);
3  console.log("Age : " + this.age);
4  console.log("value of a : " + a);
5  console.log("value of b : " + b);
6  console.log("value of c : " + c);
7}

call

1Call method accepts object reference as first argument And accepts 'n' number of arguments.
2 Here, arguments are passed to the function's parameter list.
3 It will call the function Immediately.

Example : Print name , age of object human1 and print function arguments.

1detailsAll.call(human1, 10,20,30);
2 
3Output - 
4Name : Chombi 
5Age : 20 
6value of a : 10 
7value of b : 20
8value of c : 30

apply

1Apply method accepts of 2 arguments where object reference is first argument and 2nd argument is the array of arguments.
2 Here arguments are passed to the function's parameters list.
3 It will call the function immediately

Example : Print name , age of object human2 and print function arguments.

1detailsAll.apply(human2,[11,22,33]);
2 
3Output - 
4Name : Dinga 
5Age : 19 
6value of a : 11 
7value of b : 22
8value of c : 33

bind

1Bind method accepts object reference as 1st argument and excepts 'n' number of arguments.
2 Here 'n' number of arguments are passed to the function's parameter list.
3 It will not call the function immediately.
4 It returns a new function in which 'this' Keyword is pointing to the object reference we have passed.
5 To execute the function we need function reference and parenthesis

Example : Print name , age of object human3 and print function arguments.

1let func = detailsAll.bind(human3, 77,88,99);
2func();
3 
4Output - 
5Name : Nimbi 
6Age : 18 
7value of a : 77
8value of b : 88
9value of c : 99

Topics

introduction

For practice we will use these objects as reference.

Below function we will use to access object's properties by using call, apply and bind methods.

call

Example : Print name , age of object human1 and print function arguments.

apply

Example : Print name , age of object human2 and print function arguments.

bind

Example : Print name , age of object human3 and print function arguments.