JavaScript Function bind()

In JavaScript, the value of this inside a method is decided when the function is called, not when it is written. The moment you detach a method from its object — by passing it as a callback or to setTimeout — it forgets which object it belonged to. Function binding is the fix: it permanently locks this to a chosen object so the method behaves the same no matter where it is called from.

This chapter covers when and why this gets lost, how func.bind() solves it, how to use bind for partial application, and how bind compares to arrow functions.

The "losing this" problem

A method works fine when called as object.method(), because this is set to whatever is left of the dot. But pass that same method somewhere else and the dot is gone — so this is lost.

The second call prints Hello, undefined! because runLater invoked callback() as a plain function, so this is no longer user. (In strict mode this is undefined and reading this.firstName would throw a TypeError.)

The same thing happens with setTimeout — it stores the function and later calls it on its own, with no object attached:

To learn more about how this is resolved inside methods, see Object methods, "this".

Fixing it with func.bind()

The method func.bind(thisArg) returns a new function whose this is permanently set to thisArg. The original function is not changed — you get a bound copy.

A common pattern is to store the bound version back on the object so every reference is safe to pass around:

Binding happens only once

Once a function is bound, this is fixed forever. Calling bind again on the result does nothing — the second binding is ignored.

Partial application: presetting arguments

bind accepts arguments after thisArg, and they are passed to the original function ahead of any later arguments. This lets you create a specialized function from a more general one — called partial application.

You can also preset this and arguments together:

bind vs. arrow functions

An arrow function does not have its own this — it takes this from the surrounding scope at the time it is written (lexical this). This makes arrows a lightweight alternative to bind when you need to keep the outer this inside a callback:

Which to choose:

• Use an arrow function to capture the current this inline, especially in callbacks where you don't need a separately reusable function.
• Use bind when you need a standalone function with a fixed this to pass elsewhere, or when you also want to preset arguments. Unlike an arrow, a bound function can be stored, reused, and passed by name.

One caveat: an arrow function cannot be used as an object method that relies on this pointing to the object, because it captures this from the enclosing scope (often the global object) instead of the caller.

When would I use this?

• Passing a method to an event handler, setTimeout/setInterval, Promise.then, or array methods like forEach.
• Building specialized functions from general ones with partial application (e.g. bind(null, presetArg)).
• Any time a method must keep working after it is detached from its object.

If you need to call a function with a chosen this immediately (rather than create a reusable copy), use call/apply instead — see Decorators and forwarding, call/apply. For a deeper look at arrow-function this, see Arrow functions revisited.

Practice