In this code along, we will be practicing the use of bind
, call
and apply
.
You can follow along using your browser's JS console, or use httpserver
to
serve the provided index.html
. The HTML file will automatically load
index.js
and edits you make there will be shown in your browser.
- Use
call()
andapply()
to invoke a function with an explicit value forthis
- Explain the difference between
call()
andapply()
in the way you pass arguments to the target function - Use
bind()
to create new functions that are associated to specified contexts - Use
bind()
to execute functions asynchronously
In our exploration of this
, we saw how it can change depending on how it is
called. Let's take a look at a quick example. Copy and paste this into your
browser's JS console to test for yourself:
function greet() {
console.log(`my name is ${this.name}, hi!`);
}
greet(); // my name is , hi!
let person = {
name: 'Bob',
greet: greet
};
person.greet(); // my name is Bob, hi!
We have a function, greet
, that logs a string. Interpolated into this string
is this.name
. When the greet
is invoked as a function, this
is referring
to the global object, window. We say that the context for
the greet()
is window
. In browser-based JavaScript, window
is the
"default context."
However, when greet
is invoked as a method of an object, this
changes to
refer to the object the method is invoked in. That is the context
automatically changes to be the containing object. Since person
has a name
property set, so this.name
means the value 'bob'.
We've seen here that there are conditions where JavaScript will change the
context ("what this
is set to) automatically. Developers can also force
functions to be executed in other contexts. Javascript allows us to do this
using the call
and apply
methods.
function greet() {
console.log(`my name is ${this.name}, hi!`);
}
let sally = { name: 'Sally' };
greet.call(sally);
// my name is Sally, hi!
greet.apply(sally);
// my name is Sally, hi!
As you see above, we can use call
or apply
to invoke a function with a
specified context. The context in which the function is to be run is passed
in as the first argument to these methods.
NOTE: Our
greet
function is actually an instance of aFunction
class. Because of this a function instance can also have methods. Function's are things that run, but also things like{}
in JavaScript.
Both call
and apply
give us a way to invoke a function and explicitly set
its context (what this
will equal) in thei first argument. The difference
between the two is how arguments are passed to the function.
Let's modify our greet
function to be a little chattier:
function greet(customerOne, customerTwo) {
console.log(`Hi ${customerOne} and ${customerTwo}, my name is ${this.name}!`);
}
Now, when we invoke greet
, not only do we need to explicitly set this
, but
we also need to pass values for customerOne
and customerTwo
.
Using call
, we pass the object for this
as the first argument, followed by
any function arguments in order.
let sally = { name: 'Sally' };
function greet(customerOne, customerTwo) {
console.log(`Hi ${customerOne} and ${customerTwo}, my name is ${this.name}!`);
}
greet.call(sally, 'Terry', 'George');
// Hi Terry and George, my name is Sally!
Great! Now we see the name and the message! What happens if we don't pass any arguments?
greet.call(sally);
// Hi undefined and undefined, my name is Sally!
The call to apply
works similarly to call
, except that apply
only takes
two arguments: the value of this
, and then an Array
of arguments to pass to
the function, like so:
greet.apply(sally, ['Terry', 'George']);
// Hi Terry and George, my name is Sally!
You can remember the difference because apply
takes an array (both begin
with the letter a). You can use either call
or apply
. The only difference
is stylistic. Both exist because sometimes arguments need to be collected or
bundled up (apply
) versus passed directly (call
).
So far, we have been looking at call
and apply
, which both explicitly set
this
and then immediately execute the function call.
Sometimes, we want to take a function, associate it to a context and return a "context-bound" version of the original function.
Once we have the "context-bound" version of the function we can call it with
(arguments, arguments, ...)
or call()
or apply()
without having to
manually set the context. Let's see it in action.
let sally = { name: 'Sally' };
function greet(customer) {
console.log(`Hi ${customer}, my name is ${this.name}!`);
}
let newGreet = greet.bind(sally); // newGreet is context-bound to sally
newGreet('Bob');
// Hi Bob, my name is Sally!
greet('Bob');
// Hi Bob, my name is !
As you see from the above code, by calling greet.bind(sally)
, we return a new
function that we then assign to the variable newGreet
. Invoking newGreet
shows that the this
object is bound to sally
.
Note that the original greet
function is unchanged. bind
does not change it.
Instead, bind
copies the function, and sets the copied function's this
context
to whatever is passed through as an argument.
We can actually use bind and invoke immediately:
greet.bind(sally)('Bob');
// Hi Bob, my name is Sally!
But this is just a noisy way of doing the same work of call()
or apply()
.
But assigning this to a variable like we did with newGreet
makes this easily
reusable and transferable. In complex applications, there are times when
it is better that this
refers to the context we assign. Until the
introduction of arrow functions, every new JavaScript function defined
its own this
value. Using bind
, we can prevent this behavior.
Let's imagine we want to create an app that matches user interests with keywords
from upcoming events. We could create a User
class and be able to assign
properties to user instances, like a name and an array of interests. We can also
include a class function, matchInterests
, that takes in an event and returns
true if there are any matching keywords:
class Event {
constructor(title, keywords) {
this.title = title;
this.keywords = keywords;
}
}
class User {
constructor(name, interests) {
this.name = name;
this.interests = interests;
}
matchInterests(event) {
return event.keywords.some(function(word) {
return this.interests.includes(word);
});
}
}
let billy = new User('billy', ['music', 'art', 'movies']);
let freeMusic = new Event('Free Music Show', ['music', 'free', 'outside']);
billy.matchInterests(freeMusic);
// Uncaught TypeError: Cannot read property 'interests' of undefined
Here, a new User
instance is created and assigned to billy
. A name and
interests are assigned as properties in the constructor
. We've also created a
new Event
, with a title and keywords, assigned to freeMusic
.
matchInterests
is a class method that takes in an event object, checks to see
if some event keywords are included in the user's interests, and returns
true or false accordingly.
Except, when we call billy.matchInterests(freeMusic);
,
that is not what happens. The problem in our code above is here:
function(word) {
return this.interests.includes(word);
}
Since every new function defines its own this
value, when the callback
function is invoked, this
will be undefined
. We can see this by logging
inside and outside the function:
class Event {
constructor(title, keywords) {
this.title = title;
this.keywords = keywords;
}
}
class User {
constructor(name, interests) {
this.name = name;
this.interests = interests;
}
matchInterests(event) {
console.log("'this' is defined: ", this);
return event.keywords.some(function(word) {
console.log("'this' is now undefined: ", this);
return this.interests.includes(word);
});
}
}
let billy = new User('billy', ['music', 'art', 'movies']);
let freeMusic = new Event('Free Music Show', ['music', 'free', 'outside']);
billy.matchInterests(freeMusic);
// Uncaught TypeError: Cannot read property 'interests' of undefined
In the first console.log
, this
refers to the billy
user instance. In the
second, this
is undefined
. To solve this problem, we can use bind
:
class Event {
constructor(title, keywords) {
this.title = title;
this.keywords = keywords;
}
}
class User {
constructor(name, interests) {
this.name = name;
this.interests = interests;
}
matchInterests(event) {
return event.keywords.some(
function(word) {
return this.interests.includes(word);
}.bind(this) // added to the and of the callback function
);
}
}
let billy = new User('billy', ['music', 'art', 'movies']);
let freeMusic = new Event('Free Music Show', ['music', 'free', 'outside']);
billy.matchInterests(freeMusic);
Let's see why the above code works. When the matchInterests
method is invoked,
this
refers to the User
instance context receiving the method call. We are
in that context when our callback function is defined. Using bind
here lets us
keep this
referring to the User
context.
In modern JavaScript, arrow functions don't have their own this
, so this
will refer to whatever context the arrow function was invoked in. Using an arrow
function, we could rewrite matchInterests
as:
matchInterests(event) {
return event.keywords.some(word => this.interests.includes(word));
}
Here, this
will refer to the User
instance context.
We reviewed how this
works for simple function calls. Then we saw how call
and apply
allow us to instantly execute functions while specifying the this
value of the executed function. Then we learned how to use bind
to make copies
of functions with a new this
value bound to the copy of the function.
- MDN: Function.prototype.call()
- MDN: Function.prototype.apply()
- MDN: Function.prototype.bind()
- No Separate This
View Javascript bind call and apply on Learn.co and start learning to code for free.