如何在JavaScript中通过引用传递函数调用中的参数? [英] How to pass parameters in function calls by reference in JavaScript?
问题描述
I have recently asked the question, Why should we use anonymous functions with jQuery instead of the function directly? and along with the accepted answer came a second question: How to pass arguments to one JS function that we are invoking by reference?
如何调用$("a").on("click"，retornaNada);该函数是否接收简单的参数(例如数字)或作为更复杂的对象?
How would be the call to $("a").on("click", retornaNada); whether this function receives a simple parameters such as a number or as a more complex object?
推荐答案
以您的实际示例为例:
$("a").on("click", retornaNada);
如果您阅读了jQuery docs ，它将告诉您它将传递给处理程序的内容.它将调用您提供的任何函数并将其传递给具有各种属性的eventObject(请参见文档).如果需要，可以将更多数据作为绑定的一部分传递给event.data(请参见将数据传递给处理程序部分)
If you read the jQuery docs, it will tell you what it will pass to the handler. It will call whatever function you provide and pass it an eventObject which has various properties (see the docs). If you want, you can pass more data as part of your binding that will end up in event.data (see the section Passing data to the handler)
因此，如果您这样做:
$("a").on("click", { foo:"bar" }, retornaNada);
并具有功能retornaNada:
function retornaNada(e) {
console.log(e.data.foo); // logs "bar"
}
或者，如果您想更多地控制传递给函数的内容，那么使用这些匿名函数将是一个好地方:
Alternatively, if you want more control over what gets passed to your function, this would be a good place to use those anonymous functions:
$("a").on("click", function() {
retornaNada(myOwn, argumentsTo, myFunction);
});
例如，如果retornaNada看起来像这样:
So, for example, if retornaNada looked like this:
function retornaNada(anumber) {
}
然后您可以这样做:
$("a").on("click", function() {
retornaNada(1);
});
编辑:对第一个选项(使用data)和第二个选项(使用匿名函数包装)的一些想法.
Edit: Some thoughts on the first option (using data) and the second (wrapping with an anonymous function).
假设您有一个名为addToTotal的函数，它将在每次事件发生时增加一个计数器.使用第一个选项，您的函数可能如下所示:
Let's say you have a function called addToTotal that is going to increase a counter every time an event happened. With the first option, your function might look like this:
function addToTotal(e) {
theTotal += e.data.amountToAdd;
}
这当然很好，但是如果您在其他地方也有其他逻辑需要增加总数怎么办?您需要重现函数主体的逻辑(内联或在另一个函数中)，或者需要伪造"和事件对象
This is fine, of course, but what if you also have other logic elsewhere that you need to increase your total? You need to either reproduce the logic of the body of your function (either inline or in another function), or you need to "fake" and event object
addToTotal({ data: 1 }); // fake event object - this is kind of stupid
此外，函数addToTotal接受的参数实际上并不是您想要添加的数量，这真是愚蠢，可能会使其他人在查看您的代码时感到困惑.
In addition, a function addToTotal that takes an argument that isn't actually the amount you want to add is goofy and will likely confuse anybody else looking at your code.
在那种情况下，更明智地定义addToTotal来取一个数字并将加到总数中会更好得多:
In that case, it would be a lot better to define addToTotal more sensibly to take a number and add it to the total:
function addToTotal(number) {
theTotal += number;
}
现在我可以在任何地方调用它了
Now I can call it anywhere:
addToTotal(1); // this looks a lot better!
但是我不能将其用作事件处理程序，因为它将传递eventObject而不是我需要的数字，因此:
but I can't use it as an event handler because it will pass an eventObject instead of the number I need so this:
$("a").on("click", addToTotal)
是行不通的.因此，我们可以将函数包装在一个不明显的函数中:
Isn't going to work. So instead, we can wrap our function in an annoymous function:
$("a").on("click", function() { addToTotal(1); } )
现在我们有一个事件将调用我们的函数，和我们的函数看起来并不傻，并且可以完全不知道是从事件处理程序中调用它还是在其他地方调用.
And now we have an event that will call our function, and our function doesn't look goofy and can be completely agnostic about whether it's called from an event handler or called somewhere else.
当然，如果您确实愿意，可以这样做:
Of course, if you really wanted to, you could do this:
function addToTotalEventHandler(e) {
addToTotal(e.data.amountToAdd);
}
然后:
$("a").on("click", { data : 1 }, addToTotalEventHandler);
但这与匿名包装程序基本相同，但是您必须为此用途创建一个新函数.
But that is basically the same as the anonymous wrapper, but you've had to create a new function just for this single use.
这篇关于如何在JavaScript中通过引用传递函数调用中的参数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
