javascript - 为什么要使用命名函数表达式？

Question

我们有两种不同的方式在 JavaScript 中进行函数表达式:

命名函数表达式 (NFE):

var boo = function boo () {
  alert(1);
};

匿名函数表达式:

var boo = function () {
  alert(1);
};

而且它们都可以用boo();调用。我真的不明白为什么/什么时候应该使用匿名函数以及什么时候应该使用命名函数表达式。它们之间有什么区别？

Answer 1

在匿名函数表达式的情况下，函数是匿名的——从字面上看，它没有名字。您分配给它的变量有一个名称，但该函数没有。 (更新:通过 ES5 是这样。从 ES2015 [aka ES6] 开始，通常使用匿名表达式创建的函数会获得真实名称 [但不是自动标识符]，继续阅读...)

名字很有用。可以在堆栈跟踪、调用堆栈、断点列表等中看到名称。名称是一件好事™。

(您过去不得不提防旧版 IE [IE8 及更低版本] 中的命名函数表达式，因为它们在两个完全不同的时间错误地创建了两个完全独立的函数对象 [更多内容在我的博客文章中 Double take]。如果您需要支持 IE8 [!!]，最好坚持使用匿名函数表达式或函数声明，但要避免命名函数表达式。)

命名函数表达式的一个关键是它在函数体中为函数创建一个具有该名称的范围内标识符:

var x = function example() {
    console.log(typeof example); // "function"
};
x();
console.log(typeof example);     // "undefined"

不过，从 ES2015 开始，许多“匿名”函数表达式创建了带有名称的函数，而这早于各种现代 JavaScript 引擎，它们非常聪明地从上下文中推断名称。在 ES2015 中，您的匿名函数表达式会产生一个名为 boo 的函数。但是，即使使用 ES2015+ 语义，也不会创建自动标识符:

var obj = {
    x: function() {
       console.log(typeof x);   // "undefined"
       console.log(obj.x.name); // "x"
    },
    y: function y() {
       console.log(typeof y);   // "function"
       console.log(obj.y.name); // "y"
    }
};
obj.x();
obj.y();

函数名称的赋值是通过 SetFunctionName 完成的规范中各种操作中使用的抽象操作。

简短的版本基本上是任何时候匿名函数表达式出现在诸如赋值或初始化之类的东西的右侧，例如:

var boo = function() { /*...*/ };

(或者它可以是 let 或 const 而不是 var)，或者

var obj = {
    boo: function() { /*...*/ }
};

或

doSomething({
    boo: function() { /*...*/ }
});

(最后两个实际上是一回事)，生成的函数将有一个名称(boo，在示例中)。

有一个重要且有意的异常(exception):分配给现有对象的属性:

obj.boo = function() { /*...*/ }; // <== Does not get a name

这是因为在添加新功能的过程中出现了信息泄露问题；详情在我对另一个问题的回答中here .