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

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

javascript jquery

如何在JavaScript中通过引用传递函数调用中的参数？,javascript,jquery,Javascript,Jquery,我最近问了一个问题，，在接受答案的同时还有第二个问题：如何将参数传递给我们通过引用调用的一个JS函数打电话给美元（a）的情况如何？（“点击”，Retronanada）；此函数是接收数字等简单参数还是接收更复杂的对象？以下是一个示例： var foo = function () { console.log(arguments); }; 我们可以这样调用它： foo(1,2,3,4); //[1,2,3,4] foo.apply(window, [1,2,3

我最近问了一个问题，，在接受答案的同时还有第二个问题：如何将参数传递给我们通过引用调用的一个JS函数

打电话给美元（a）的情况如何？（“点击”，Retronanada）；此函数是接收数字等简单参数还是接收更复杂的对象？

以下是一个示例：

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]
}

以下是一个例子：

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]
}

当您使用

$（“a”）。在（“click”，returnanaada）

上调用给定的函数如下：

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

如果函数不希望事件对象作为其第一个参数，则典型的做法是使用包装函数，即：

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

当您使用

$（“a”）。在（“click”，returnanaada）

上调用给定的函数如下：

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

如果函数不希望事件对象作为其第一个参数，则典型的做法是使用包装函数，即：

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

根据您的实际示例：

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

如果您阅读jQuery，它将告诉您它将传递给处理程序的内容。它将调用您提供的任何函数，并向其传递一个具有各种属性的

eventObject

（参见文档）。如果需要，可以将更多数据作为绑定的一部分传递，这些数据最终将出现在

event.data

（请参阅将数据传递给处理程序一节）

因此，如果你这样做：

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

并具有一个函数

returnanaada

：

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

或者，如果您希望对传递给函数的内容进行更多控制，那么这里将是使用这些匿名函数的好地方：

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

例如，如果

retronada

看起来像这样：

function retornaNada(anumber) {

}

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

然后你可以做：

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

编辑：关于第一个选项（使用

数据

）和第二个选项（使用匿名函数包装）的一些想法

假设您有一个名为

addToTotal

的函数，它将在每次事件发生时增加一个计数器。使用第一个选项，您的函数可能如下所示：

function retornaNada(anumber) {

}

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

当然，这很好，但是如果你在其他地方也有其他逻辑，你需要增加你的总数呢？您需要复制函数体的逻辑（内联或在另一个函数中），或者需要“伪造”和事件对象

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

此外，如果函数

addToTotal

接受的参数实际上不是您想要添加的数量，则该函数是愚蠢的，可能会使查看代码的其他人感到困惑

在这种情况下，最好更明智地定义

addToTotal

，取一个数字并将其添加到总数中：

现在我可以在任何地方叫它：

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

但我不能将其用作事件处理程序，因为它将传递一个

eventObject

，而不是我需要的数字，因此：

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

这是行不通的。因此，我们可以将我们的函数包装成一个恼怒的mous函数：

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

现在我们有了一个事件，它将调用我们的函数，我们的函数看起来并不愚蠢，完全不知道它是从事件处理程序调用的还是在其他地方调用的

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

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

然后：

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

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

对于您的实际示例：

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