call() Method: It calls the method, taking the owner object as argument. The keyword this refers to the ‘owner’ of the function or the object it belongs to. We can call a method which can be used on different objects.
Syntax:
object.objectMethod.call( objectInstance, arguments )
Parameters: It accepts two parameters as mentioned above and described below:
- objectInstance: It holds the instance of an object.
- arguments: The call() method takes the comma separated arguments.
apply() Method: The apply() method is used to write methods, which can be used on different objects. It is different from the function call() because it takes arguments as an array.
Syntax:
object.objectMethod.apply(objectInstance, arrayOfArguments)
Parameters: It accepts two parameters as mentioned above and described below:
- objectInstance: It holds the instance of an object.
- arrayOfArguments: The apply() method takes the array of arguments.
Difference between call() and apply() method: The only difference is call() method takes the arguments separated by comma while apply() method takes the array of arguments.
Example 1: This example uses call() method to call a function.
<!DOCTYPE html> < html > < head > < title >call() method</ title > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > GeeksForGeeks </ h1 > < button onClick = "fun()" > click </ button > < p id = "GFG" ></ p > <!-- Script to use call() method to call function --> < script > function fun() { let p = { fullName: function(addr1, addr2) { return this.fName + " " + this.lName + ", " + addr1 + ", " + addr2; } } let p1 = { fName:"GFGfName", lName: "GFGlName", } let x = p.fullName.call(p1, "India", "USA"); document.getElementById("GFG").innerHTML = x; } </ script > </ body > </ html > |
Output:
- Before clicking the button:
- After clicking the button:
- Example 2: This example does the same work by using apply() method.
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>JavaScript apply() method</
title
>
</
head
>
<
body
style
=
"text-align:center;"
>
<
h1
style
=
"color:green;"
>
GeeksForGeeks
</
h1
>
<
button
onClick
=
"fun()"
>
click
</
button
>
<
p
id
=
"GFG"
></
p
>
<
script
>
function fun() {
let p = {
fullName: function(addr1, addr2) {
return this.fName + " " + this.lName
+ ", " + addr1 + ", " + addr2;
}
}
let p1 = {
fName:"GFGfName",
lName: "GFGlName",
}
let x = p.fullName.apply(p1, ["India", "USA"]);
document.getElementById("GFG").innerHTML = x;
}
</
script
>
</
body
>
</
html
>
Output: