$ ❯ CrowderSoup

A website about programming, technology, and life.

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.