Managing Scope Using Call, Apply, and Bind
by Aaron Crowder on in JavaScript
Call
Calls a function, with the specified arguments passed in
The first argument becomes this
, the rest are passed in as regular arguments.
Using call allows you to maintain the scope of this
accross methods. It works
like this:
Here we’re using prototypical inheritance to allow us to inheirit properties from
Animal
in Dog
and Cat
. Using call
allows us to invoke Animal
to initialize
it’s properties while maintaining the correct scope.
Apply
Calls a function, with the specified arguments passed in as an array
Just like call
, the first argument becomes this
. The rest of the args are
passed in as an array.
Bind
Creates a bound function with the same function body as the function it’s called on
With bind
, we actually get a reference to a new function. The first argument
passed to bind
becomes this
, and the rest are passed as regular arguments.
This is especially handy for event handlers.
Wrapping up
These examples are fairly trivial, but they do serve to show that it’s possible
to manage scope without aliasing this
to something like self
. In a lot of
cases that can actually be pretty confusing. But, as with everything, use what
makes sense! This method may or may not work well for you, and that’s okay.