Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Function.prototype.bind?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

`Function.prototype.bind` - це один із **трьох "методів керування контекстом"** у JavaScript поряд із `call` і `apply`,
але **він не викликає функцію одразу**, а **повертає нову "прив'язану" функцію**.

---

## Що робить `bind`

Метод `bind` створює **нову функцію**, у якої:

- назавжди закріплений контекст `this`;
- можна частково зафіксувати аргументи (partial application);
- сама функція **не виконується одразу**, а повертається для виклику пізніше.

---

## Синтаксис

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

- `thisArg` - значення, яке стане `this` всередині функції при виклику;
- `arg1, arg2, ...` - аргументи, які будуть підставлені "типово";
- Повертає **нову функцію**, яку можна викликати пізніше.

---

## Приклад 1 - найпростіший

```javascript
function greet() {
  console.log(`Привіт, я ${this.name}`);
}

const user = { name: 'Тим' };

const sayHi = greet.bind(user);

sayHi(); // Привіт, я Тим
```

Тут `sayHi` - нова функція, у якої `this` **назавжди прив'язаний** до `user`.

---

## Приклад 2 - з аргументами

```javascript
function introduce(city, job) {
  console.log(`Я ${this.name} з ${city}, працюю як ${job}`);
}

const person = { name: 'Тим' };

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

introduceTim('фронтенд-розробник');
// Я Тим з Berlin, працюю як фронтенд-розробник
```

Ми заздалегідь "забіндили" перший аргумент (`'Berlin'`),
а решту можна передавати при виклику.

---

## Приклад 3 - втрата контексту без `bind`

Дуже часто `bind` потрібен, щоб **зберегти** `this` при передачі методу як callback.

```javascript
const user = {
  name: 'Тим',
  sayHi() {
    console.log(`Привіт, я ${this.name}`);
  }
};

setTimeout(user.sayHi, 1000); // this втрачено -> "Привіт, я undefined"

setTimeout(user.sayHi.bind(user), 1000); // "Привіт, я Тим"
```

---

## Приклад 4 - часткове застосування (partial application)

Можна "наперед задати" частину аргументів:

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

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

Тут `bind` створив нову функцію, де `a = 2` зафіксовано,
і вона чекає лише другий аргумент `b`.

---

## Відмінність від `call` і `apply`

| Метод | Що робить | Коли викликається | Як передаються аргументи |
|---|---|---|---|
| **call** | Викликає функцію з вказаним `this` | Одразу | Через кому |
| **apply** | Те саме, але аргументи масивом | Одразу | Масив |
| **bind** | Повертає нову функцію з "прив'язаним" `this` | Пізніше | Через кому |

---

## Особливості

1. `bind` **не змінює оригінальну функцію**, а повертає **нову копію**.
2. "Прив'язаний" `this` не можна змінити - навіть через `call` або `apply`.
3. Якщо "забіндену" функцію викликати як конструктор (`new`),
`this` всередині неї буде **новим об'єктом**, а не прив'язаним контекстом.

---

## Приклад 5 - `bind` + `new`

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

const BoundUser = User.bind({ name: 'Тим' });

const u = new BoundUser('Аня');
console.log(u.name); // Аня - контекст прив'язки ігнорується при new
```

При `new` у `bind` є особливість - пріоритет у конструктора, а не у прив'язаного `this`.

---

## ПІДСУМОК

| Властивість | Опис |
|---|---|
| Що робить | Прив'язує контекст `this` і/або частину аргументів |
| Повертає | Нову функцію |
| Коли викликається | Пізніше (вручну) |
| Контекст можна змінити потім? | Ні |
| Часткове застосування | Так |
| Використовується часто для | Callbacks, обробників подій, React-компонентів |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати514 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.