爲什麼認爲使用匿名函數而不是函數引用作爲參數更好？

Question

像這樣：

addEventHandler(document.getElementById('btnAdd'), "click", function() 
    { addNewItem(); }, false); 

代替：

addEventHandler(document.getElementById('btnAdd'), "click", addNewItem, false); 

我知道這是涉及到JavaScript解釋器（一個或多個）工作一多一點。但是如何？

Answer 1

使用命名功能允許：

• 短，更具可讀性，行
• 描述性的名稱
• 容易別處功能

傳遞匿名函數，什麼都不做，除了重用調用單個其他函數（如您的示例）只是膨脹 - 內聯函數表達式的冗長性，同時仍具有命名函數，它是兩個世界中最糟糕的。

Answer 2

使用命名功能包括：

• 更多的代碼
• 全球空間的污染
• 不太可讀的代碼，因爲它不是很明顯，函數在其他地方沒有
使用

因此，如果您不重用函數，最好使用匿名函數而不是創建命名函數。

但是，如果你的代碼恰好是你展示的代碼，那麼匿名函數根本就沒有意義。什麼是第二碼相當於匿名相當於是

addEventHandler(document.getElementById('btnAdd'), "click", function() { 
    // addNewItem implementation 
}, false); 

而且如果你已經有一個名爲功能，例如，因爲你重用它，那麼就不要使用匿名函數來包裝它。

Answer 3

我打算給我的意見而不是聲稱這是最佳做法。我曾經總是將引用作爲參數傳遞給命名函數，而我絕不會傳遞小包裝匿名函數，因爲我可以避免它。但是，我已經擺脫了這個標準。現在，當我不懷疑我的函數的簽名有太多迭代時，我傳入了對命名函數的引用，並且當我懷疑函數的簽名會迭代時，我會傳入包裝函數的匿名函數。

我會用這個JS Fiddle來解釋我以前的標準，現行標準，以及爲什麼我放棄了舊標準。總之，我從一些錯誤中瞭解到，包裝匿名函數的傳遞可以更安全地重構，因爲您必須明確地編寫要傳遞給函數的參數。不過，這兩種模式都有它們的位置。

var btn = document.getElementById('btn'); 
var btn2 = document.getElementById('btn2'); 

//I previously tended to pass in function name references. However, I recently moved towards 
//passing in anonymous functions because I found that pattern to be a bit more refactor safe. 
//More specifically, it is more refactor safe when you suspect the signature of our function 
//will change. If you never expect the function's signature to change, then I guess you shouldn't 
//need to worry about passing in an anonymous function. 

//Because of the way addEventListener uses addNewItem, addNewItem will always receive one 
//paramter: the event object. Therefore, we are not using addNewItem correct. It expects one 
//argument that is message. Previously, we were calling addNewItem correctly when it looked like 
//addNewItemOld and expected zero arguments. Click "Add message incorrect" to see the incorrect 
//behaviour 
btn.addEventListener("click", addNewItem); 

//Now I often to wrap my function calls in anonymous functions because I know exactly what arguments 
//I'm passing into my function. In this case I am explicitely not passing in a message. Now, we are 
//using the addNewItem function correctly 
btn2.addEventListener("click", function(e) { addNewItem(); }); 

//This function has been refactored. It used to look like addNewItemOld. The way 
//this function's signature has been refactored is particularly interesting. It now 
//has an optional paramter called message. 
function addNewItem(message) { 
    var span =document.createTextNode(message || "Now nodes have a default message"), 
     workspace = document.getElementById("workspace"); 
    workspace.appendChild(span); 
} 

function addNewItemOld() { 
    var span =document.createTextNode("Every node has the same message"), 
     workspace = document.getElementById("workspace"); 
    workspace.appendChild(span); 
}