JavaScript：如何将多个参数传递给对象成员内的回调函数？

Posted 2023-05-07

【中文标题】JavaScript：如何将多个参数传递给对象成员内的回调函数？

【英文标题】：JavaScript: How to pass multiple arguments to a callback function inside an object's member?

【发布时间】：2013-05-29 16:46:53

【问题描述】：

在使用插件时，我有时会偶然发现一个类似这样的插件：

它将采用构造函数参数。 某些参数解析为函数。 其中一些需要多次争论。

像这样：

    color: function (someData, moreData) 
        return someData + moreData;
    

如何将两个参数传递给该函数？

注意：我无法更改插件，因此不能将第二个参数移动到另一个构造函数参数。

示例 javascript：

(function ($) 
    $.fn.greenify = function (options) 
        var settings = $.extend(
            color: function (someData, moreData)  // <-- THIS TAKES 2 ARGUMENTS!
                return someData + moreData;
            ,
        , options);
        return this.css(
            color: settings.color,
        );
    ;
(jQuery));

$("#target1").greenify(
    color: "blue"
);

$("#target2").greenify(
    color: ["bl", "ue"]   // <-- In your answer only this should be changed
);

我的目标：

<div id="target1">My Thing</div>   // <-- will be blue
<div id="target2">My Thing2</div>  // <-- will be black but should be blue

FIDDLE DEMO

---

更新： 我误以为这段代码

$("#target1").greenify(
    color: "blue"
);

会将值"blue" 传递给function (someData, moreData) 作为第一个参数someData。 这是错误的！实际发生的是默认回调（function (someData, moreData)）被字符串"blue"完全替换！

【问题讨论】：

您实际上不必更改构造函数 (demo)，但我想无论如何您都必须更新插件主体。

我猜您没有向我们展示实际的插件，因为您发布的内容没有多大意义（但可能是插件编码器的错误）。如果有，请链接到真正的源代码。

@Bergi: Here is the actual plugin 这向我提出了这个问题。但我的问题与设计决定无关。我很好奇 JS 的能力。

相关行是here - 它使用多个参数调用具有给定名称的方法（例如$(…).select2("data", someValues, true)）。那是你想要的吗？或者您想了解更多关于如何 设计 jQuery 插件以及使用.apply 的信息？

谢谢。这是一个很好的解决初始问题的方法。除此之外，我仍然对处理上述示例的方法感到好奇。

【参考方案1】：

如何将两个参数传递给该函数？

你没有。 jQuery 可以。这是一个回调函数，用于在 .css() 方法中动态确定 color 属性 - 请参阅 the docs。

所以实际上，这个默认函数没有任何意义，因为它应该返回一个 css 颜色值，而是返回以元素索引为前缀的旧值——这绝对不是颜色。

所以只需使用$("#target2").greenify(color: "black")。

如果你想传递一个函数，这也是可能的——但它会覆盖，而不是调用那个默认函数。一个例子：

$("div").greenify(
    color: function(index, prevColor) 
        return ["blue", "black"][index % 2];
    
);

【讨论】：

这实际上会覆盖function (someData, moreData) ... 还是仅将其返回值传递给原始函数中的第一个参数someData？

是的，它将在settings 对象上替换它。无法调用该函数，因为您无法从外部访问它（不使用一些丑陋的技巧，例如妥协 $.extend）

我会接受这个作为答案，因为这是最合适的（指向最后一部分） - 基本上这个问题包含一个设计缺陷，实际上没有插件会有。

【参考方案2】：

var settings = $.extend(, options);
if($.isArray(options.color)) 
    settings.color = function () 
        return options.color.join('');
    ;

小提琴：http://jsfiddle.net/2QBGm/

【讨论】：

OP说他无法更改插件！

【参考方案3】：

看到这个jsFiddle

我已经对您的代码进行了一些更改，现在它可以按照您的需要运行。

我使用选项对象来获取参数：

color: function () 
    return options.color[0] + options.color[1];

【讨论】：

OP说他无法更改插件！

@Bergi 感谢您的通知。我认为插件是另一回事。我没有完全理解这个问题。我的错，对不起