为何JavaScript的.bind()方法会前置传入的可选参数？

兄弟我太懂你这种懵圈的感觉了！当初第一次摸.bind()的时候，也被这个参数前置的操作搞得头大，尤其是在事件处理函数里混用的时候，完全摸不清参数到底去哪了。

先搞懂：为什么.bind()要把参数前置？ #

其实.bind()的核心设计就是提前预设函数参数，属于函数柯里化的一种实现——简单说就是给函数“提前喂”几个固定参数，等函数真正被调用时，这些提前传的参数会排在函数原本该接收的参数前面。这种设计是为了让我们能复用函数，比如有个通用的计算函数，你想固定其中一个参数（比如乘法里的乘数），就可以用.bind()提前绑定，之后调用时只需要传另一个参数就行。

结合你的代码分析问题 #

你的示例代码是这样的：

$('#example').on('change', function(arg1, arg2, evt) { 
  console.log(evt, arg1, arg2); 
}.bind(null, arg1, arg2));

这里的坑在于：当change事件触发时，jQuery会自动给事件处理函数传递**事件对象evt**作为第一个参数，但你用.bind()提前传了arg1和arg2，所以实际函数接收到的参数顺序是：arg1, arg2, evt。而你函数定义里写的是(arg1, arg2, evt)，这时候evt其实是第三个参数，但你console.log时把它放在第一个位置，结果肯定和你预期的不一样！

怎么解决？ #

给你两种简单的方案：

• 调整函数参数顺序：把绑定的参数放在前面，事件对象放后面，这样就能对应上实际传递的顺序：

  $('#example').on('change', function(arg1, arg2, evt) { 
    console.log(evt, arg1, arg2); // 现在顺序完全匹配，arg1/arg2是绑定的，evt是事件触发时传的
  }.bind(null, arg1, arg2));
  

• 用箭头函数替代.bind()：如果不需要改变this指向（jQuery事件处理里this本来就是触发事件的DOM元素），箭头函数更直观，不会有参数顺序的困扰：

  $('#example').on('change', (evt) => { 
    console.log(evt, arg1, arg2); 
  });
  

另外提一句：.bind()的第一个参数是用来绑定this的，你传null就表示保持函数原本的this指向，在这个场景下完全没问题。

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