The JavaScript call() Method
The call() method can be used to call a function with a specific this .
The call() method lets an object use a method belonging to another object.
In this way, the same method can be used on different objects .
call() is an advanced topic.
Make sure you understand this before continuing: The this Keyword
The this Keyword
Basic call() Syntax
The call() method is used to call a function with an object as an argument .
The call() method takes this as the first argument.
Additional arguments are passed as a comma-separated list .
Syntax
functionName.call(
this
, arg1, arg2, ...);Using call() to Set this
When you use call() , you can decide what this should refer to.
In the example below, the greet function returns a greeting + this.name .
When you use call() , you decide that this should be the person3 object.
Example
const person1 = { name: "John" };
const person2 = { name: "Paul" };
const person3 = { name: "Ringo" };
function greet(greeting) {
return greeting + " " + this.name;
}
greet.call(person3, "Hello");Borrowing a Method from Another Object
You can use call() to borrow a method from another object:
Example 1
const person = {
fullName
: function() {
return this.firstName + " " + this.lastName;
}
}
const person1 = {
firstName:"John", lastName: "Doe"
}
const person2 = {
firstName:"Mary", lastName: "Doe"
}
// This will return "John Doe": person.fullName.call( person1 );Example 2
const person = {
fullName
: function() {
return this.firstName + " " + this.lastName;
}
}
const person1 = {
firstName:"John", lastName: "Doe"
}
const person2 = {
firstName:"Mary", lastName: "Doe"
}
// This will return "Mary Doe" person.fullName.call( person2 );The call() Method with Arguments
The call() method can accept arguments.
Arguments are passed normally, separated by commas:
Example
const person = {
fullName: function(city, country) {
return this.firstName + " " + this.lastName
+ "," + city + "," + country;
}
}
const person1 = {
firstName:"John", lastName: "Doe"
}
person.fullName.call(person1, "Oslo", "Norway");call() vs Normal Function Call
Compare a normal function call with a call() call.
Example
function showName() {
return this.name;
}
const person = { name: "John" };
showName();
showName.call(person);Without call() , this is not the person object.
With call() , this is set explicitly.
call() Does Not Create a New Function
The call() method executes the function immediately. It does not return a new function.
Example
function sayHello() {
return "Hello " + this.name;
}
const person = { name: "John" };
sayHello.call(person);If you need a new function that remembers this , use bind() instead.
Common Mistakes
- Forgetting that call() Runs Immediately call() does not return a reusable function.
- Passing Arguments as an Array call() requires arguments to be listed one by one. Use apply() for arrays.
- Using call() Without Understanding this Always know what this should refer to.
Related this Topics
The this Keyword
The call() Method
The apply() Method
The bind() Method