JavaScript Function — об'єкт функції, call, apply, bind

У JavaScript функція — це об'єкт: її можна передати в іншу функцію, покласти в масив, додати їй властивість. Клас Function описує саме цей об'єкт.

правити

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

Головне, що дає ця «об'єктність» — три методи керування контекстом this.

call() викликає функцію, підставляючи потрібний this і передаючи аргументи через кому. apply() робить те саме, але аргументи бере масивом. bind() нічого не викликає — він створює нову функцію з навіки прив'язаним this.

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

правити

Нотатка

Конструктор new Function('return 1') компілює рядок у функцію — це той самий eval у профіль, з тими самими ризиками. У реальному коді він майже ніколи не потрібен.

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

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

Синтаксис

function fn(a, b) { ... }

властивості

методи

Переглядачі

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

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

Переглядач
	1	1	1	3	12	4

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

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

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

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

Приклади

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

function greet(greeting) {
    return greeting + ', ' + this.name;
}

const user = { name: 'Іван' };

console.log(greet.call(user, 'Привіт'));   // 'Привіт, Іван'
console.log(greet.apply(user, ['Вітаю'])); // аргументи масивом

// bind не викликає — він створює нову функцію
const hello = greet.bind(user, 'Добрий день');
console.log(hello()); // 'Добрий день, Іван'

// класична пастка: this загубився в обробнику
class Counter {
    constructor() {
        this.count = 0;
        // без bind тут this буде кнопкою, а не Counter
        button.addEventListener('click', this.increment.bind(this));
    }

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