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;
-
- 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;
-
- this.getUserDetails = function(city,state){
- var details = `User's name is ${this.firstName} ${this.lastName} and address is ${city} ${state}`
- return details;
- }
- }
-
-
- 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;
- }
-
- var getUserDetails = function(city,state){
- var details = `User's name is ${this.firstName} ${this.lastName} and address is ${city} ${state}`
- return details;
- }
-
-
- var a = new A("Vipin","Sharma");
- var b = new B("Ashish","Sharma");
call() method
Syntax
functionName.call(objectName,functionArguments)
-
-
- 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,
- Object
- An array of parameters that should be passed into the function.
-
- var arr = ["Jhansi","UP"];
- var arr1 = ["Mathura","UP"];
-
-
- console.log(getUserDetails.apply(a,arr))
-
-
- 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
-
- 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 -
-
- var obj = getUserDetails.bind(a);
-
- console.log(obj("Jhansi","UP"));
Or, another way,
-
- 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 the 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.
-
- var getUserDetails = function(city,state){
- var details = `User's name is ${this.firstName} ${this.lastName} and address is ${city} ${state}`
- return details;
- }
-
-
- var firstName = "Vipin";
- var lastName = "Sharma";
-
-
- console.log(getUserDetails.bind(this)("Jhansi","UP"));
Output
User's name is Vipin Sharma and address is Jhansi UP