JavaScript使用bind绑定额外参数后运行时参数未生效如何解决

• 对bind方法的作用机制存在误解：Function.prototype.bind()调用后不会修改原函数本身，只会返回一个全新的、绑定了指定this上下文、携带前置预设参数的包装函数。原代码中调用testFunction.bind(...)后没有将返回的新函数做任何赋值，生成的绑定函数直接被丢弃，原testFunction没有任何改变。
• 事件绑定未关联到绑定后的函数：原HTML中testButton的onclick写为onclick='testFunction()'，点击触发时执行的是全局作用域下的原生testFunction，没有传入任何参数，自然拿不到预设的消息；就算手动生成了带参数的绑定函数，这段内联的调用逻辑也和生成的新函数没有任何关联。
• 参数顺序不匹配：bind方法传入的预设参数，会排在函数实际被调用时收到的所有参数之前。如果直接把bind生成的新函数作为onclick的事件处理函数，浏览器触发点击时会自动把event事件对象作为调用参数传入，最终会排在所有bind预设参数的后面。如果形参顺序和这个传参逻辑不匹配，就会出现值错位的问题。

按照以下逻辑调整即可实现预期效果：

1. 提前缓存需要操作的DOM元素引用，避免重复查询DOM
2. 执行bind逻辑时，将bind返回的、携带预设参数的新函数，赋值给testButton的onclick事件，替换掉原来的内联调用逻辑
3. 调整原函数的形参顺序，把需要通过bind预设的参数放在形参列表的前面位置，把浏览器自动传入的event对象放在形参列表的靠后位置，匹配bind的传参规则

可直接运行的参考代码：

// 提前获取DOM元素
const testButton = document.getElementById('testButton');
const bindButton = document.getElementById('bindButton');

// 形参顺序：先放bind传入的预设参数message，再放事件自动传入的event
const testFunction = (message, event) => {
  console.log('当前触发事件的元素：', event.currentTarget);
  console.log('绑定的运行时参数：', message); // 可正常获取预设的'hello'值
}

const bindTheMessage = () => {
  // bind生成的新函数会被赋值给testButton的点击事件
  // 传入的'hello'作为bind前置参数，对应形参列表的第一个位置
  testButton.onclick = testFunction.bind(testButton, 'hello');
}

// 绑定bind按钮的点击触发逻辑
bindButton.addEventListener('click', bindTheMessage);

对应调整后的HTML结构（移除无意义的内联调用，修正HTML标签闭合错误）：

<html>
<body>
  <button id='bindButton'>bind a message</button>
  <button id='testButton'>click to get message</button>
</body>
</html>

补充说明：如果需要绑定的参数是运行时动态计算得到的值，只需在调用bind时传入对应动态值即可，bind会把该值固化到返回的包装函数中，不会随外部后续的变量变更而变化。

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