Suggest an edit

Improve this article

Refine the answer for “Function.prototype.bind?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

`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

1. `bind` **does not change the original function**, it returns a **new copy**.
2. The "bound" `this` cannot be changed - even via `call` or `apply`.
3. 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 |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts576 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.