为什么使用命名函数表达式 [英] Why use named function expressions?

问题描述

我们有两种不同的方法来在JavaScript中执行函数表达式：

$ b

命名函数表达式（NFE）

：

  var boo =函数boo（）{
 alert（1）; 
}; 
  

匿名函数表达式：

  var boo = function（）{
 alert（1）; 
}; 
  

可以用 boo（）; 。我真的不明白为什么/何时应该使用匿名函数，何时使用命名函数表达式。它们之间有什么不同？

解决方案

在匿名函数表达式中，函数是 anonymous EM> —从字面上看，它没有名字。你分配给它的变量有一个名字，但是这个函数没有。 （更新：通过ES5确实是如此，从ES2015 [又名ES6]开始，通常使用匿名表达式创建的函数会得到一个真实姓名，请继续阅读...）

名称很有用。名字可以在堆栈轨迹，调用堆栈，断点列表等中看到。名称是一个好事物。

你必须要提防旧的命名函数表达式IE版本（IE8及以下），因为IE在两个完全不同的时间错误地创建了两个完全独立的函数对象（更多内容在我的博客文章 Double take ）。如果您需要支持IE8，最好使用匿名函数表达式或函数声明，但避免使用命名函数表达式。

截至ES2015虽然有很多匿名函数表达式用名字创建函数，但是由于各种现代JavaScript引擎在从上下文推断名称方面非常聪明，在ES2015中，您的匿名函数表达式会生成一个名称 boo 的函数。这是遍布规范，而不是被定义在一个放置一堆规则：搜索当前在以下位置找到的SetFunctionName：

• 第12.2.6.9节（属性初始值语义）


• 第12.14.4节（赋值运算符语义） §12.14.5.2和§12.14.5.4（解构赋值语义）
  
• §13.3.1.4（ let 和 const 声明语义）


• ...和一串其他
  

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

  var boo = function（）{/*...*/}; 
  

（或者它可以是 let 或 const 而不是 var ），或者

  var obj = {
 boo：function（）{/*...*/} 
}; 
  

或

  doSomething（{
 boo：function（）{/*...*/} 
}）; 
  

（后两个实际上是相同的），结果函数将会有一个名称（例子中的 boo ）。

有一个重要的故意的例外：Assigning到一个现有对象的属性：

  obj.boo = function（）{/*...*/}; //< ==没有得到一个名字
  

这是因为当新功能正在经历被添加的过程;详细信息请参阅此处的另一个问题。

We have two different way for doing function expression in JavaScript:

Named function expression (NFE):

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

Anonymous function expression:

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

And both of them can be called with boo();. I really can't see why/when I should use anonymous functions and when I should use Named Function Expressions. What difference is there between them?

解决方案

In the case of the anonymous function expression, the function is anonymous — literally, it has no name. The variable you're assigning it to has a name, but the function does not. (Update: That was true through ES5. As of ES2015 [aka ES6], often a function created with an anonymous expression gets a true name, read on...)

Names are useful. Names can be seen in stack traces, call stacks, lists of breakpoints, etc. Names are a Good Thing™.

You do have to beware of named function expressions in older versions of IE (IE8 and below), because IE mistakenly creates two completely separate function objects at two completely different times (more in my blog article Double take). If you need to support IE8, it's probably best to stick with anonymous function expressions or function declarations, but avoid named function expressions.

As of ES2015, though, a lot of "anonymous" function expressions create functions with names, and this was predated by various modern JavaScript engines being quite smart about inferring names from context. In ES2015, your anonymous function expression results in a function with the name boo. This is strewn throughout the spec rather than being defined in one place with a bunch of rules: Search for occurrences of "SetFunctionName", currently found in:

• §12.2.6.9 (property initializer semantics)
• §12.14.4 (assignment operator semantics)
• §12.14.5.2 and §12.14.5.4 (destructuring assignment semantics)
• §13.3.1.4 (let and const declaration semantics)
• ...and a bunch of other places.

The short version is basically any time an anonymous function expression appears on the right-hand side of something like an assignment or initialization, like:

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

(or it could be let or const rather than var), or

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

or

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

(those last two are really the same thing), the resulting function will have a name (boo, in the examples).

There's an important, and intentional, exception: Assigning to a property on an existing object:

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

This was because of information leak concerns raised when the new feature was going through the process of being added; details in my answer to another question here.

这篇关于为什么使用命名函数表达式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！