JavaScript Functions
JavaScript
call,applyandbindlet you choose what thethiskeyword refers to inside a function.
Normally this depends on how a function is called.
These three methods let you set it yourself.
Example
javascript
const person = { name: "Ada" };
function greet() {
return "Hello " + this.name;
}
console.log(greet.call(person));Here, call runs greet with this set to person.
The output is Hello Ada.
call runs the function immediately, with arguments listed one by one.
apply runs it immediately, with arguments given as an array.
bind does not run it; it returns a new function with this locked in.
Syntax
javascript
func.call(thisValue, arg1, arg2);
func.apply(thisValue, [arg1, arg2]);
const bound = func.bind(thisValue);The first argument of all three is the value this should take.
call passes arguments one after another.
Example
javascript
const person = { name: "Ada" };
function introduce(city, job) {
return this.name + " from " + city + ", " + job;
}
console.log(introduce.call(person, "London", "engineer"));The first argument sets this; the rest are normal arguments.
apply does the same job but takes the arguments as an array.
It is useful when the arguments are already in an array.
Example
javascript
const person = { name: "Ada" };
function introduce(city, job) {
return this.name + " from " + city + ", " + job;
}
console.log(introduce.apply(person, ["London", "engineer"]));Modern code often uses the spread operator instead.
bind returns a new function instead of running it.
The new function always has the same this, no matter how it is called later.
Example
javascript
const person = { name: "Ada" };
function greet() {
return "Hello " + this.name;
}
const greetAda = greet.bind(person);
console.log(greetAda());This is useful when passing a method as a callback.
When a method is passed as a callback, it loses its object.
bind keeps the connection.
Example
javascript
const counter = {
count: 0,
increase: function () {
this.count++;
return this.count;
}
};
const boundIncrease = counter.increase.bind(counter);
console.log(boundIncrease());
console.log(boundIncrease());Without bind, this.count would not point at the counter.
These methods let one object use a method that belongs to another.
Example
javascript
const ada = { name: "Ada" };
const grace = { name: "Grace" };
function sayName() {
return this.name;
}
console.log(sayName.call(ada));
console.log(sayName.call(grace));The same function gives a different answer depending on the object passed in.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript call, apply and bind</title>
</head>
<body>
<h1>JavaScript call, apply and bind</h1>
<p id="result"></p>
<script>
const person = { name: "Ada" };
function introduce(city, job) {
return this.name + " from " + city + ", " + job;
}
document.getElementById("result").innerHTML =
introduce.call(person, "London", "engineer");
</script>
</body>
</html>Run the above example in the Try It Editor.
Try apply instead:
Replace the call with introduce.apply(person, ["Paris", "writer"]).
this means inside a function.call runs the function with arguments listed one by one.apply runs it with arguments in an array.bind returns a new function instead of running it.bind is what keeps a method connected to its object in a callback.JavaScript call, apply and bind give you direct control over this.
bind is the one you will reach for most, usually when passing methods as callbacks.
Understanding them removes most of the confusion around the this keyword.