Function.prototype.bind?

JavaScriptMiddle~2 хв читання

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`	Пізніше	Через кому

Особливості

bind не змінює оригінальну функцію, а повертає нову копію.
"Прив'язаний" this не можна змінити - навіть через call або apply.
Якщо "забіндену" функцію викликати як конструктор (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-компонентів

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.