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

JavaScript: How to pass multiple arguments to a callback function inside an object's member?

本文关键字：成员 对象 函数 回调 参数传递 JavaScript      更新时间：2023-09-26

在使用插件时，我有时会偶然发现一个具有以下内容的插件：

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

喜欢这个：

{
    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

小提琴演示

更新：我陷入了一个重大的误解，即这段代码 

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

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

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

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

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

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

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

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

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

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

看这个 jsFiddle

我已经对您的代码进行了一些更改，现在它正在按您的要求工作。

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

color: function () {
    return options.color[0] + options.color[1];
}
相关文章：