Call, Apply and Bind In JavaScript

In JavaScipt, as we know, an object has its own properties and methods. Let us take a quick look.

function A(firstName,lastName){
    this.firstName = firstName;
    this.lastName = lastName;
    //I am using Template literals (Introduce in ES 6) ${this.firstName} to show the details
    this.getUserDetails = function(city,state){
        var details = `User's name is ${this.firstName} ${this.lastName} and address is ${city} ${state}`
        return details;
    }
}

function B(firstName,lastName){
    this.firstName = firstName;
    this.lastName = lastName;
    //I am using Template literals (Introduce in ES 6) ${this.firstName} to show the details
    this.getUserDetails = function(city,state){
        var details = `User's name is ${this.firstName} ${this.lastName} and address is ${city} ${state}`
        return details;
    }
}

//Create objects
var a = new A("Vipin","Sharma");
var b = new B("Ashish","Sharma");

console.log(a.getUserDetails("Jhansi","UP"));
console.log(b.getUserDetails("Mathura","UP"));

Output 

User's name is Vipin Sharma and address is Jhansi UP

User's name is Ashish Sharma and address is Mathura UP 

 

As we can see, there are two identical methods for both objects but we are using both the methods to get the user's details. We need to avoid code repetition.

 

Let's take a look at how to use Call, Apply, and Bind.

 

In the below code, I have created two function constructors and one method. I have also created objects for both function constructors.

function A(firstName,lastName){
    this.firstName = firstName;
    this.lastName = lastName;
}

function B(firstName,lastName){
    this.firstName = firstName;
    this.lastName = lastName;
}

//create a single function to get user's details
var getUserDetails = function(city,state){
    var details = `User's name is ${this.firstName} ${this.lastName} and address is ${city} ${state}`
    return details;
}

//Create objects
var a = new A("Vipin","Sharma");
var b = new B("Ashish","Sharma");

call() method

 

Syntax

functionName.call(objectName,functionArguments)

//a and b are objects for A and B function constructor.
//Jhansi and UP are parameters passed into the function.
console.log(getUserDetails.call(a,"Jhansi","UP"))
console.log(getUserDetails.call(b,"Mathura","UP"))

Output

User's name is Vipin Sharma and address is Jhansi UP

User's name is Ashish Sharma and address is Mathura UP

 

As you can see, there are no parentheses after the function name because it is accessed as an object. We are using a single method (getUserDetails) for both objects. 

 

apply() method

 

Syntax

functionName.apply(objectName,[functionArguments])

 

The apply() method works exactly the same as call() works except it accepts only two parameters,

1. Object
2. An array of parameters that should be passed into the function. 

//array of parameters that will pass to the function.
var arr = ["Jhansi","UP"];
var arr1 = ["Mathura","UP"];

//arr array for object a call
console.log(getUserDetails.apply(a,arr))

//arr1 array for object b call
console.log(getUserDetails.apply(b,arr1))

Output

User's name is Vipin Sharma and address is Jhansi UP

User's name is Ashish Sharma and address is Mathura UP

 

bind() method

bind() is little bit different from call() and apply().

 

Let's take a look with example 

//passing parameters to bind()
console.log(getUserDetails.bind(a,"Jhansi","UP"))

 If I run the above code, I will get a function object back, not the correct result.

 

Output

function (city,state){

var details = `User's name is ${this.firstName} ${this.lastName} and address is ${city} ${state}`

return details;

}

 

Instead of giving me the result, it is giving me a function object so we can do it like below - 

//Storing function object to a variable.
var obj = getUserDetails.bind(a);
//calling function object with parameters.
console.log(obj("Jhansi","UP"));

Or, another way,

//we can directly pass the parameters to function objets
console.log(getUserDetails.bind(a)("Jhansi","UP"));

Output

User's name is Vipin Sharma and address is Jhansi UP 

 

this Keyword

Let's change the code a little bit. Instead of passing object name, I am passing "this".

var getUserDetails = function(city,state){
    var details = `User's name is ${this.firstName} ${this.lastName} and address is ${city} ${state}`
    return details;
}
//this is referring to global object
console.log(getUserDetails.bind(this)("Jhansi","UP"));

Output

User's name is undefined and address is Jhansi UP 

 

As you can see in the ouput, it is giving undefined for firstname and lastname. When we specify this in global namespace, then this belongs to the global object but we haven't defined firstname and lastname in global namespace.

//Parameters - City and State
var getUserDetails = function(city,state){
    var details = `User's name is ${this.firstName} ${this.lastName} and address is ${city} ${state}`
    return details;
}

//now firstname and lastname are belong to global object
var firstName = "Vipin";
var lastName = "Sharma";

//this is referring to global object
console.log(getUserDetails.bind(this)("Jhansi","UP"));

Output

User's name is Vipin Sharma and address is Jhansi UP