Помощь с пониманием устройства debounce?

Question

[tantumus21]

Разбираю реализацию debounce, попалось 2 варианта:

let count = 0;

const debounce = (fn, delay) => {
  let timer;

  return function (...args) {
    clearTimeout(timer);

    timer = setTimeout(() => {
      fn(...args);
    }, delay);
  };
};


let myFunc = (inc) => {
  console.log(count += inc)
}

myFunc = debounce(myFunc, 600)

window.addEventListener("click", () => myFunc(3));

let counter = 0;

const debounce = (fn, ms) => {
  let timer;

  return function () {
    const fnCall = () => {
      fn.apply(this, arguments);
    };

    clearTimeout(timer);

    timer = setTimeout(fnCall, ms);
  };
};

function myFunc(inc) {
  console.log((counter += inc));
}

myFunc = debounce(myFunc, 600);

window.addEventListener("click", () => myFunc(3));

Первый вопрос заключается в том, как аргументы функции которая оборачивается в debounce, встраиваются вот здесь:
return function (...args) { и здесь fn.apply(this, arguments);. Откуда берется этом массив с аргументами?

Второй вопрос в том, какая из реализаций лучше? Через apply или через вызов оригинальной передаваемой функции?

Спасибо.

Answer 1

[alexalexes]

...args
arguments
Это специальные объекты JavaScript. Их заполняет сама среда интерпретарора JS, когда становится активным контекст вызываемой функции. Очень помогает обрабатывать аргументы функции, когда их количество неизвестно заранее, или нужно специально сделать такую функцию, которая обрабатывает произвольное число аргументов.
какая из реализаций лучше?
Если стоит задача написать полифил для поддержки старых версий браузера, то следует использовать объекты JS, которые поддерживаются как можно в ранней версии стандарта языка (смотрите таблицу совместимости браузеров с тем или иным стандартным объектом).
Если такой задачи нет, то берем стильные, модные, молодежные языковые конструкции.

Answer 2

[Stalker_RED]

arguments - это подобный массиву объект, который содержит аргументы, переданные в функцию.

А какая лучше сказать сложно. На первый взгляд разницы практически нет.

Answer 3

[Alexandroppolus]

Второй вопрос в том, какая из реализаций лучше?

та, которая fn.apply(this, arguments);
потому что там есть поддержка this.
иногда это может понадобиться.

Comments

[WbICHA]

иногда это может понадобиться.

На самом деле примерно никогда. А когда это никогда понадобится, можно использовать бинд.

[Alexandroppolus]

WbICHA, debounce - это декоратор. А значит, в идеале он должен быть абсолютно прозрачным, а не с оговорками типа "вот это не реализовано, ну сорян". Почему-то мне так кажется.

[WbICHA]

Alexandroppolus, в целом, я согласен, но просто использование дебоунса и зиса вместе это настолько редкий случай, что им можно и пренебречь.