javascript - 如何在 JavaScript 中通过引用传递函数调用中的参数？

Question

我最近问了这个问题， Why should we use anonymous functions with jQuery instead of the function directly? 伴随着被接受的答案而来的是第二个问题:如何将参数传递给我们通过引用调用的一个 JS 函数？

如何调用 $("a").on("click", retornaNada);这个函数是接收一个简单的参数，比如一个数字还是一个更复杂的对象？

Answer 1

你的实际例子:

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

如果您阅读 jQuery docs ，它会告诉你它将传递给处理程序的内容。它将调用您提供的任何函数并将其传递给具有各种属性的 eventObject(请参阅文档)。如果需要，您可以将更多数据作为绑定(bind)的一部分进行传递，这些数据将在 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 以获取一个数字并将其添加到总数会好得多:

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

现在我可以在任何地方调用它了:

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

但我不能将它用作事件处理程序，因为它会传递一个 eventObject 而不是我需要的数字，因此:

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

不会工作。因此，我们可以将我们的函数包装在一个烦人的函数中:

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

现在我们有一个事件将调用我们的函数，并且我们的函数看起来并不傻，并且可以完全不知道它是从事件处理程序调用还是从其他地方调用。 p>

当然，如果你真的想，你可以这样做:

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

然后:

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

但这与匿名包装器基本相同，但您必须为这种单一用途创建一个新函数。