JavaScript bind() — прив'язати this до функції

Метод bind() не викликає функцію — він створює нову, з навіки прив'язаним this.

правити

Загальний опис

Це головна відмінність від call() і apply(): ті викликають одразу, а bind() віддає функцію на потім.

І саме він рятує в класичній пастці: передав метод об'єкта як обробник події — і this усередині раптом став елементом, а не об'єктом. Бо метод передається без свого об'єкта, як гола функція.

bind() уміє прив'язувати ще й аргументи — це називають частковим застосуванням. Прив'язав перший аргумент, і отримав спеціалізовану версію функції.

Прив'язку не можна перевизначити: повторний bind() чи call() на вже прив'язаній функції нічого не змінить.

правити

Нотатка

Стрілкова функція this не має власного — вона бере його з місця оголошення. Тому в класах із полями-стрілками bind() не потрібен узагалі.

автор: NagarD правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	7	4	5.1	11.6	12	9

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	6

Підтримка: серверні переглядачі

Переглядач
	0.10.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

class Counter {
    constructor(button) {
        this.count = 0;

        // без bind тут this буде КНОПКОЮ
        button.addEventListener('click', this.increment.bind(this));
    }

    increment() {
        this.count++;
        console.log(this.count);
    }
}

// або поле-стрілка — bind не потрібен
class Better {
    count = 0;
    increment = () => this.count++;
}

// часткове застосування: прив'язуємо й аргумент
function log(level, message) {
    console.log('[' + level + ']', message);
}

const error = log.bind(null, 'ПОМИЛКА');
error('Не вдалося зберегти'); // [ПОМИЛКА] Не вдалося зберегти