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（请参阅文档）。如果需要，您可以将更多数据作为绑定的一部分传递到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); } )

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

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

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

您可以使用Function Prototype Bind。

基本上，它重新绑定函数引用的参数。但是你失去了对它的引用（与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
}

使用bind，第一个传递的参数将是this引用，后面的参数将是函数中的参数。

原始参数（在本例中为Event）将始终是最后一个。

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

4 个答案: