Как сохранить контекст вызова функции внутри debounce?

Проблема потери контекста в debounce

Debounce — это техника, которая ограничивает частоту вызова функции, откладывая её выполнение до тех пор, пока не пройдёт определённый промежуток времени после последнего вызова. Когда мы передаём метод объекта в debounce, контекст this теряется, потому что debounce возвращает новую функцию, которая вызывается в глобальном контексте (или undefined в strict mode).

Как это работает

Рассмотрим пример: у нас есть объект с методом, который использует this. Если мы передадим этот метод в debounce, то при вызове debounce-функции this будет указывать на window или undefined, а не на объект.

function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

const obj = {
  name: 'MyObj',
  log() { console.log(this.name); }
};

const debouncedLog = debounce(obj.log, 100);
debouncedLog(); // undefined или ошибка

Решение с bind

Самый простой способ — привязать контекст с помощью bind() при создании debounce-функции:

const debouncedLog = debounce(obj.log.bind(obj), 100);
debouncedLog(); // 'MyObj'

Решение через замыкание

Можно также сохранить контекст внутри debounce, используя стрелочную функцию, которая не создаёт свой this:

function debounce(fn, delay) {
  let timer;
  return function(...args) {
    const context = this;
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(context, args), delay);
  };
}

В этом случае мы сохраняем this в переменную context внутри замыкания и передаём её в apply.

Вывод

Используйте bind() для явного указания контекста или реализуйте debounce с сохранением this через замыкание. Это особенно важно при работе с обработчиками событий в React или при использовании методов объектов в асинхронных вызовах.