如何通过JavaScript中的参考来传递函数调用中的参数

Question

我最近问了这个问题，为什么我们要直接使用jQuery而不是直接使用函数？？如何将参数传递给我们通过参考调用的一个JS函数？

如何调用$（" a"）。on（" click"，retornanada）;此函数是否接收一个简单的参数，例如数字或更复杂的对象？

Answer 1

到您的实际示例：

$("a").on("click", retornaNada); 

如果您阅读了jQuery文档，它将告诉您将其传递给处理程序。它将调用您提供的任何功能，并将其传递给具有各种属性的eventObject（请参阅文档）。如果需要，您可以将更多数据作为绑定的一部分传递，该数据最终会在event.data中最终出现（请参阅"将数据传递给处理程序））

所以如果您这样做：

$("a").on("click", { foo:"bar" }, retornaNada);

并具有函数retornaNada：

function retornaNada(e) {
    console.log(e.data.foo);     // logs "bar"
}

另外，如果您想更多地控制传递给您功能的内容，这将是使用这些匿名功能的好地方：

$("a").on("click", function() { 
    retornaNada(myOwn, argumentsTo, myFunction); 
});

所以，例如，如果retornaNada看起来像这样：

function retornaNada(anumber) {
}

您可以做：

$("a").on("click", function() { 
    retornaNada(1); 
});

编辑：关于第一个选项（使用data）和第二个（使用匿名函数包装）的一些想法。

假设您的功能称为addToTotal，每次发生事件时都会增加计数器。对于第一个选项，您的功能可能看起来像这样：

function addToTotal(e) {
    theTotal += e.data.amountToAdd;
}

当然很好，但是如果您在其他地方还有其他逻辑还需要增加总数，该怎么办？您需要重现功能正文的逻辑（内联或其他功能中），或者需要"伪造"和事件对象

addToTotal({ data: 1 });     // fake event object - this is kind of stupid

此外，一个函数 addToTotal采用了一个实际上不是要添加的数量的参数，这很愚蠢，可能会使其他任何人看着您的代码感到困惑。

在这种情况下，更明智地定义 addToTotal的数字和将其添加到Total ：

会更好很多。

function addToTotal(number) {
    theTotal += number;
}

现在我可以在任何地方称呼它：

addToTotal(1);     // this looks a lot better!

但我无法将其用作事件处理程序，因为它会通过eventObject而不是我需要的数字，所以：

$("a").on("click", addToTotal)

无法正常工作。因此，我们可以将功能包裹在烦人的功能中：

$("a").on("click", function() { addToTotal(1); } )

现在，我们有一个将我们的函数称为和的事件，我们的功能看起来不愚蠢，并且可以完全不知道是从事件处理程序中调用还是在其他地方被调用。

当然，如果您真的愿意，可以这样做：

function addToTotalEventHandler(e) {
    addToTotal(e.data.amountToAdd);
}

，然后：

$("a").on("click", { data : 1 }, addToTotalEventHandler);

，但这与匿名包装器基本相同，但是您必须创建一个新功能，仅用于此用途。

Answer 2

当您使用$("a").on("click", retornaNada)时，给定功能称为：

retornaNada.call(<anchor-object>, <event-data>)

<anchor-object>是单击的锚点的DOM对象，可作为this的功能可用，而<event-data>是单击事件本身的包装对象，因此：

function retornaNada(e)
{
    console.log(this); // DOM object
    console.log(e); // event object
}

如果您的函数不期望事件对象是其第一个参数，那么典型的事情就是使用包装函数，即：

$('a').on('click', function(e) {
    retornaNada(... whatever ...);
});

Answer 3

这是一个示例：

var foo = function () {
  console.log(arguments);
};

我们可以将其调用为：

foo(1,2,3,4);                  //[1,2,3,4]
foo.apply(window, [1,2,3,4]);  //[1,2,3,4]
foo.call(window, 1,2,3,4);     //[1,2,3,4]

我们可以将foo传递到另一个功能并以相同的方式调用：

function bar() {
  foo(1,2,3,4);                  //[1,2,3,4]
  foo.apply(window, [1,2,3,4]);  //[1,2,3,4]
  foo.call(window, 1,2,3,4);     //[1,2,3,4]
}

Answer 4

您可以使用函数原型绑定。

基本上，它重新介绍了函数参考的参数。但是您失去了对此的引用（与event.currentTarget相同）。

您会这样使用：

$("a").on("click", retornaNada.bind('something that will equal this', 'arg1', 1));

和功能接收：

function retornaNada(a, b, c){
    console.log(this); //'something that will equal this'
    console.log(a); //'arg1'
    console.log(b); // 1
    console.log(c); // Event object
}

使用绑定，第一个传递的参数将是this参考，以下参数将是函数中的参数。

原始参数（在这种情况下为Event）将永远是最后一个。