命名內聯函數有什么優勢？

Question

在例如。 回調，命名內聯函數和匿名內聯函數之間有什么區別？

我認為它增加了可讀性，但還有其他優點嗎？

例如。

element.addEventListener("load", function onLoad() {
  // execute code
});

vs.

element.addEventListener("load", function() {
  // execute code
});

編輯：我想我也可以用命名的內聯函數來做到這一點

...
element.addEventListener("load", function onLoad() {
  // execute code ...
  element.removeEventListener("load", onLoad);
});

Answer 1

你可以使它遞歸：

document.addEventListener('mousemove', function stackOverflow() {
    stackOverflow();
});

您無法使用匿名內聯函數執行此操作。 不是那么容易，至少（有arguments.callee ，但它不應該再使用了）。

Answer 2

好吧，唯一的區別是函數的name屬性將是匿名函數中的空字符串。 如果保留function onLoad()而不是匿名函數，則屬性onLoad.name將包含字符串'onLoad'。 name屬性是語言的擴展（它不是ECMA標准的一部分。）

當使用諸如Firebug之類的調試器時，或者從自身遞歸調用相同的函數時，name屬性很有用; 否則你可以跳過它。

Answer 3

只要您想引用該功能，它就很有用。

除了遞歸（如前所述），您還可以將數據直接綁定到函數（因為函數是第一類對象，對吧？）。 此技術的一個有用應用可能包括memoization ，您可以通過函數保存以前計算的值，以防止以后再次重新計算值。

button.addEventListener("click", function fn() {
  fn.counter = fn.counter || 0;
  console.log(++fn.counter);
});

Answer 4

它主要用於改善Error對象中的堆棧跟蹤; 因此，在錯誤的堆棧跟蹤中，您將看到函數的實際名稱而不是（匿名函數）字符串。

但是，請記住，存在一些范圍和兼容性問題。 一些JavaScript環境將命名函數表達式的范圍表示為Object的實例; 也就是說，它從Object.prototype繼承屬性。 所以你可以面對這樣的問題：

var constructor= function() { return null; };
var f = function() { return constructor() };
f();

最后一行將在某些ES3 JavaScript環境中返回{}，而不是null。 值得慶幸的是，ES5中沒有此問題。

如果您想使其遞歸，您可以選擇執行以下操作：

var recurs = function(){
    recurs();
} 

document.addEventListener('mousemove', recurs);

還有一點需要注意，內聯函數（或命名函數表達式）的名稱僅在函數本身中可見。