为什么在jQuery中调用函数需要包装在方法中？

Question

假设我有一个功能：

function myFunction() {
 ...
}

我想从事件处理程序中调用它。为什么这种结构不能调用我的功能？

$(window).resize(myFunction());

但这就是诀窍：

$(window).resize(function(){myFunction()});

这些类型的通话有什么区别？

Answer 1

$(window).resize(myFunction());

立即调用 myFunction并将返回值传递给resize。在函数名称/引用之后添加括号将调用该函数。

另一方面，

$(window).resize(function(){myFunction()});

将匿名函数传递给resize。仅在调用外部函数时调用myFunction。

匿名功能并不特别。在这种情况下，它只是某种内联函数定义。您可以使用函数参考轻松替换它：

var handler = function(){myFunction()}; // take out the function definition
$(window).resize(handler);  // and replace it with the new name

现在您可以看到函数名后面没有括号，这意味着，handler未被调用，只传递了引用。

我希望您现在也可以看到在此示例中创建新函数不是必需的。您只需将引用传递给myFunction：

即可实现相同目的

$(window).resize(myFunction);

---

但两种方式都有其用例。

如果$(window).resize(myFunction()); 返回应该用作事件处理程序的函数，则第一个示例myFunction仍然有用：

function myFunction() {
    var handler = function() {};
    return handler;
}

也许重新调整的处理程序取决于传递给myFunction的参数。

如果要使用某些特定参数调用myFunction，则必须传递匿名函数：

function myFunction(a, b) {
    alert(a + b);
}

$(window).resize(function(){
    myFunction(40, 2);
});

---

<强>更新

@T.J. Crowder对event object做了重要评论。每个事件处理程序都将事件对象作为第一个参数传递。如果您将功能定义为

function myFunction(event) {
 ...
}

使用匿名函数（更容易）访问它，你必须通过它：

$(window).resize(function(event){myFunction(event)});

如果你想使用它。