Function.prototype.bind?

JavaScriptMiddle~2 min read

Function.prototype.bind is one of the three "context management methods" in JavaScript alongside call and apply, but it does not call the function immediately - it returns a new "bound" function.

What `bind` does

The bind method creates a new function that has:

a permanently fixed this context;
some arguments partially fixed (partial application);
the function itself does not run immediately, it is returned to be called later.

Syntax

javascript

func.bind(thisArg, arg1, arg2, ...)

thisArg - the value that becomes this inside the function when called;
arg1, arg2, ... - arguments that will be substituted "by default";
Returns a new function that can be called later.

Example 1 - the simplest

javascript

function greet() {
  console.log(`Hello, I'm ${this.name}`);
}

const user = { name: 'Tim' };

const sayHi = greet.bind(user);

sayHi(); // Hello, I'm Tim

Here sayHi is a new function whose this is permanently bound to user.

Example 2 - with arguments

javascript

function introduce(city, job) {
  console.log(`I'm ${this.name} from ${city}, working as ${job}`);
}

const person = { name: 'Tim' };

const introduceTim = introduce.bind(person, 'Berlin');

introduceTim('frontend developer');
// I'm Tim from Berlin, working as frontend developer

We "pre-bound" the first argument ('Berlin') in advance, and the rest can be passed at call time.

Example 3 - losing context without `bind`

Very often bind is needed to preserve this when passing a method as a callback.

javascript

const user = {
  name: 'Tim',
  sayHi() {
    console.log(`Hello, I'm ${this.name}`);
  }
};

setTimeout(user.sayHi, 1000); // this is lost -> "Hello, I'm undefined"

setTimeout(user.sayHi.bind(user), 1000); // "Hello, I'm Tim"

Example 4 - partial application

You can "pre-set" part of the arguments:

javascript

function multiply(a, b) {
  return a * b;
}

const double = multiply.bind(null, 2);
console.log(double(5)); // 10

Here bind created a new function where a = 2 is fixed, and it waits only for the second argument b.

Difference from `call` and `apply`

Method	What it does	When it is called	How arguments are passed
call	Calls the function with the given `this`	Immediately	Comma-separated
apply	The same, but arguments as an array	Immediately	Array
bind	Returns a new function with `this` "bound"	Later	Comma-separated

Features

bind does not change the original function, it returns a new copy.
The "bound" this cannot be changed - even via call or apply.
If a "bound" function is called as a constructor (new), this inside it will be a new object, not the bound context.

Example 5 - `bind` + `new`

javascript

function User(name) {
  this.name = name;
}

const BoundUser = User.bind({ name: 'Tim' });

const u = new BoundUser('Anna');
console.log(u.name); // Anna - the bound context is ignored with new

With new, bind has a special behavior - the constructor takes priority over the bound this.

SUMMARY

Property	Description
What it does	Binds the `this` context and/or part of the arguments
Returns	A new function
When it is called	Later (manually)
Can the context be changed afterward?	No
Partial application	Yes
Often used for	Callbacks, event handlers, React components

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.