如何为已接收参数的事件处理程序绑定额外参数？

这个问题我之前也碰到过，bind()的参数顺序确实容易让人踩坑——它会把你传入的额外参数放在原事件参数的前面，直接用的话确实会打乱你原本想要的error参数顺序。不过有几种简单的办法能完美解决这个需求：

方法一：用箭头函数包裹（最直观推荐） #

直接在绑定事件的时候用箭头函数接收原有的error参数，然后手动调用你的处理函数并传入error和client。这种方式完全不会搞混参数顺序，还能保留你原本的this指向（箭头函数会继承外部上下文的this）：

const client = new RequestClient(...);
// 用箭头函数中转参数，保证顺序正确
client.onError((error) => this.onClientError(error, client));

// 你的处理函数可以正常接收两个参数
private onClientError = (error: Error, client: RequestClient) => {
  // 这里可以同时拿到error和client做处理
  console.log('错误信息:', error);
  console.log('当前客户端实例:', client);
};

方法二：调整参数顺序配合bind() #

如果你一定要用bind()，那可以调整处理函数的参数顺序，把要额外传递的client放在前面，然后用bind()把它传进去。这样事件触发时，原有的error会作为第二个参数传入：

const client = new RequestClient(...);
// 用bind传递client作为第一个参数，同时绑定this（如果你的处理函数不是箭头函数的话）
client.onError(this.onClientError.bind(this, client));

// 调整处理函数的参数顺序，先接收client再接收error
private onClientError = (client: RequestClient, error: Error) => {
  // 同样可以拿到两个参数
  console.log('当前客户端实例:', client);
  console.log('错误信息:', error);
};

注意：如果你的onClientError已经是箭头函数，那bind()的第一个this参数会被忽略（箭头函数的this是词法绑定的，无法通过bind修改），这时候直接写this.onClientError.bind(null, client)就行。

额外提醒 #

别担心参数覆盖的问题，只要搞清楚bind()的参数逻辑：它会把你传入的额外参数前置到原函数的参数列表中，而不是替换原参数。比如原事件会传error，你用bind(this, client)的话，处理函数会收到client, error；如果用箭头函数中转，就能完全按照你想要的顺序传递参数。

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