请求解释JavaScript防抖(debounce)逻辑中扩展运算符与args的作用

先贴出原代码方便对照：

const debounce = func => {
  let timeoutID;
  return (...args) => {
    if(timeoutID) clearTimeout(timeoutID);
    timeoutID = setTimeout(
      () => func.apply(null, args),
      1000
    );
  };
}

const onInput = event => {
  fetchData(event.target.value);
};

input.addEventListener("input", debounce(onInput));

1. 扩展运算符（...）和args的作用 #

防抖函数返回的箭头函数用(...args)是收集所有传入该函数的参数。在这个场景里，浏览器触发input事件时，会自动把event对象作为参数传给事件回调（也就是防抖返回的这个箭头函数），(...args)会把这个event对象（如果有多个参数也能全部收集）存到args数组里，目的是把原事件的参数原封不动传递给最终要执行的func（也就是onInput），保证onInput能拿到事件对象。

2. func.apply(null, args)的用法理解 #

你的方向是对的，apply的作用拆解：

• 第一个参数null：指定func执行时的this指向，这里onInput是箭头函数，本身this继承自定义它的上下文，而且onInput里用的是event.target，不需要依赖特定的this，所以传null不影响。如果是普通函数需要特定this，这里可以换成对应的对象。
• 第二个参数args：是参数数组，apply会自动把这个数组展开成独立参数传给func。比如这里args里存的是event对象，func.apply(null, args)就等价于onInput(event)，完美还原了直接调用onInput的参数传递逻辑。

3. (...args)是如何读取输入值参数的 #

纠正一下：不是return (...args)，是防抖函数返回的箭头函数的参数是(...args)。当input事件触发时，浏览器会主动调用这个箭头函数，并且把input事件的event对象作为参数传进来，(...args)就把这个event对象收集到args数组中。之后onInput被调用时拿到这个event，通过event.target.value就能读取输入框的内容。

4. 是否是onInput的返回值被传递给...args #

完全不是。...args收集的是浏览器调用防抖返回的箭头函数时传入的参数（也就是event对象），和onInput的返回值没有任何关系。onInput是被防抖函数延迟执行的目标函数，它的返回值只会在setTimeout的回调里被调用，但这里我们没有用到它的返回值。

内容的提问来源于stack exchange，提问作者codeOrcode