Javascript：将自定义参数传递给回调函数

Question

我有这个回调函数设置：

var contextMenu = [];
var context = [ { "name": "name1", "url": "url1" }, {"name": name2", "url: "url2" } ];
for(var i=0; i < context.length; i++) {
    var c = context[i];
    var arr = {};
    arr[c.name] = function() { callback(c.url); }
    contextMenu.push( arr );
}
function callback(url) {
   alert(url);
}

问题在于传递给回调的 url 值始终是上下文变量中的最后一个值——在本例中为“url2”。我期望将特定的值传递给回调的每个“实例”，但由于回调似乎记住了相同的值，因此上次引用它。

我有点卡住了。任何帮助将不胜感激。

PS：我正在使用jQuery ContextMenu，据我了解，它不支持将自定义数据发送到其回调函数。正是在这种情况下，我遇到了这个问题。在这种环境下要克服的任何建议也很有帮助！

Answer 1

使用额外的闭包。

arr[c.name] = (function(url) { 
    return function() { callback(url); }
})(c.url);

请参阅Creating closures in loops: A common mistake 和大多数其他questions 关于此主题，现在您的问题也已添加到此池中。

Answer 2

你在 for 循环中创建了一系列闭包函数

arr[c.name] = function() { callback(c.url); }

并且它们都共享相同的范围，因此相同的 c 对象将在循环结束后指向数组中的最后一个元素。

要解决此问题，请尝试这样做：

arr[c.name] = function(url) {
    return function() { callback(url); };
}(c.url);

在此处阅读有关关闭的更多信息：http://jibbering.com/faq/notes/closures/

Answer 3

一般解决方案

回调创建者助手

我沿着Anurag 指出的in his answer 的Creating closures in loops: A common mistake 创建了一个通用回调创建器。

回调创建者参数

• 函数的第一个参数是回调。
• 其他所有参数都将作为参数传递给此回调。

传递的回调参数

• 参数的第一部分来自您传递给回调创建器助手的参数（在我之前描述的第一个参数之后）。
• 第二部分来自调用者将直接传递给回调的参数。

源代码

//Creates an anonymus function that will call the first parameter of
//this callbackCreator function (the passed callback)
//whose arguments will be this callbackCreator function's remaining parameters
//followed by the arguments passed to the anonymus function
//(the returned callback).
function callbackCreator() {
    var functionToCall = arguments[0];
    var argumentsOfFunctionToCall = Array.prototype.slice.apply(arguments, [1]);
    return function () {
        var argumentsOfCallback = Array.prototype.slice.apply(arguments, [0]);
        functionToCall.apply(this, argumentsOfFunctionToCall.concat(argumentsOfCallback));
    }
}

示例用法

这是一个自定义的 AJAX 配置对象，它的成功回调使用我的回调创建者助手。使用响应文本，回调根据操作发生的行更新DataTables 表中行的第一个单元格，并打印一条消息。

{
    url: 'example.com/data/' + elementId + '/generate-id',
    method: 'POST',
    successHandler: callbackCreator(function (row, message, response) {//Callback parameters: Values we want to pass followed with the arguments passed through successHandler.
            table.cell(row, 0).data(JSON.parse(response).text);
            console.log(message);
        },
        $(this).parents('tr'),//Row value we want to pass for the callback.
        actionName + ' was successful'//Message value we want to pass for the callback.
    )
}

或者在你的情况下：

arr[c.name] = callbackCreator(function(url) {
        callback(url);
    },
    c.url
);