命名内联函数有什么优势？

Question

In a eg. a callback, what is the difference between an a named inline function and an anonymous inline function and?

I think it increases the readability, but are there other advantages?

Eg.

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

vs.

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

Edit: I guess I also can do this with a named inline function

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

Answer 1

You can make it recursive:

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

You can't do that with anonymous inline functions. Not as easily, at least (there's arguments.callee , but it shouldn't be used anymore).

Answer 2

Well, the only difference is the name property of the function will be blank string in anonymous function. If you keep the function onLoad() instead of anonymous function, then the property onLoad.name will contain the string 'onLoad'. The name property is an extension of the language (Its not part of an ECMA standard.)

The name property is useful, when using debuggers such as Firebug, or when calling the same function recursively from itself; otherwise you can just skip it.

Answer 3

It's useful whenever you want to reference the function.

Along with recursion ( as previously mentioned ), you can also bind data directly to the function (since functions are first class objects, right?). A useful application of this technique could include memoization where you could save previously computed values by your function to prevent recomputing the values again later.

A simple counter – JSFiddle

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

Answer 4

It is basically used to improve the stack traces in the Error objects; So the in the stack trace of an error you would see the actual name of the function instead of the (anonymous functions) string.

Bare in mind, though, that there are some scoping and compatibility issues. Some JavaScript environments represent the scope of the named functions expressions as an instance of Object; that is, it inherits properties from the Object.prototype. So you can face a problem like this:

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

The last line will return {} in some ES3 JavaScript environments and not null. Thankfully, this issue is not present in ES5.

If you want to make it recursive you can alternatively do the following:

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

document.addEventListener('mousemove', recurs);

One more thing to note is the name of an inline function (or named function expression) is only visible within the function itself.