如何向作为参数传递的JavaScript函数额外传入自定义参数

你提到的写法 ajaxHTTP("https://example.com", { field: "value" }, myHandlerFunction(arg1, arg2)); 不可行。
原因是该写法会直接执行myHandlerFunction(arg1, arg2)，将函数执行后的返回值作为第三个参数传入ajaxHTTP，而非传入函数本身。等到ajax请求成功触发success回调时，已经没有可执行的函数来处理返回的data了。

可行的实现方案 #

下面是三种常用的实现方式：

方案1：匿名函数包裹（最常用、最灵活） #

在调用ajaxHTTP时传入一个匿名函数作为回调，在匿名函数内部调用myHandlerFunction，同时传入自定义参数和ajax返回的data：

// 先修改myHandlerFunction，支持接收额外参数
function myHandlerFunction(data, arg1, arg2){
   //对data、arg1、arg2执行任意操作...
}

// 调用时用匿名函数中转
ajaxHTTP("https://example.com", { field: "value" }, function(data){
    // 这里可以传入任意自定义参数
    myHandlerFunction(data, "自定义参数1", "自定义参数2");
});

该方案不需要修改原有ajaxHTTP的封装，参数顺序可以灵活调整，是最推荐的写法。

方案2：使用Function.prototype.bind 绑定参数 #

可以通过bind方法预先给myHandlerFunction绑定自定义参数，注意bind预设的参数会排在调用时传入的参数之前，需要调整参数顺序：

// 调整参数顺序，自定义参数在前，ajax返回的data在后
function myHandlerFunction(arg1, arg2, data){
   //对data、arg1、arg2执行任意操作...
}

// 用bind绑定前两个参数，this指向可以根据需求设置，这里填null默认指向全局
ajaxHTTP("https://example.com", { field: "value" }, myHandlerFunction.bind(null, "自定义参数1", "自定义参数2"));

bind方法返回的是一个新的函数，不会立刻执行，符合回调函数的传入要求。

方案3：改写为高阶函数（适配你提到的写法） #

如果想要用你提到的传入方式，可以把myHandlerFunction改写为高阶函数，先接收自定义参数，再返回一个接收data的处理函数：

// 改写为高阶函数
function myHandlerFunction(arg1, arg2){
   // 返回真正的success回调函数
   return function(data) {
       //对data、arg1、arg2执行任意操作...
   }
}

// 此时你提到的写法就可以正常运行了
ajaxHTTP("https://example.com", { field: "value" }, myHandlerFunction("自定义参数1", "自定义参数2"));

这种写法适合需要复用同一组自定义参数的场景。

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