爲什麼在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)}); 

，如果你想用它。