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.
Note: call() is an advanced topic. Make sure you understand this before continuing: 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.
Next Chapter
JavaScript Function apply()
Note: Related this Topics The this Keyword The call() Method The apply() Method The bind() Method
