如何预填充函数参数？

如何解决如何预填充函数参数？

我有一个附加事件侦听器的模块，例如：

document.getElementById('btn').addEventListener('click',handleClick));

但是，当调用 handleClick 函数时，我想使用身份验证令牌自动预填充参数（如果存在）。所以，我有一个 withAuth 函数可以执行以下操作：

const token = 'token';

const withAuth = (fn) => {
  return (...args) => {
    console.log('args is ---',[...args,token]);
    fn.apply(window,[token,...args]);
  }
}

const handleClick = (...args) => {
  console.log('handle click called----',args);
}

document.getElementById('btn').addEventListener('click',withAuth((e) => handleClick(e,'Soham')));

<button id="btn">Click Me</button>

^{按F12查看控制台输出； Stack Overflow 的控制台格式无法很好地处理事件对象}

为什么即使第一个控制台正确捕获了事件对象，我仍然可以访问 handleClick 函数中的事件对象？难道我做错了什么？实现此类功能的最佳方法是什么？

解决方法

e 中的 withAuth((e) => handleClick(e,'Soham'))) 没有收到 Event 对象，
事件对象被传递给回调函数，在这种情况下，从 withAuth 返回的函数，所以在打印 args 那里你可以看到事件对象， 那么你通过传递一些参数 (e) => handleClick(e,'Soham') 来调用这个传递的函数 [token,...args]，但在函数中你只收到第一个参数 (e),

所以你可以通过 (token,event) => handleClick(token,event,'Soham')

解决这个问题

或者只是(...args) => handleClick(...args,'Soham')

const token = 'token';

const withAuth = (fn) => {
  return (...args) => {
    console.log('args is ---',[...args,token]);
    fn.apply(window,[token,...args]);
  }
}

const handleClick = (...args) => {
  console.log('handle click called----',args);
}

document.getElementById('btn').addEventListener('click',withAuth((...args) => handleClick(...args,'Soham')));

<button id="btn">Click Me</button>