匿名函数与命名函数作为对象键的值之间的区别答案

【问题标题】：Difference between anonymous function vs named function as value for an object key匿名函数与命名函数作为对象键的值之间的区别
【发布时间】：2015-09-28 17:33:51
【问题描述】：

我已经使用 Babel 编译器将 JSX 编译为 JavaScript。这是我感兴趣的一段代码。

getInitialState: function getInitialState() {
//List out different states that ListComponent could possibly have
return {
  showList: true,
  listType: this.props.type

将 JSX 编译为 JS 后，getInitialState 是一个命名方法 getInitialState()。我不明白为什么它不是匿名方法。

原码：

getInitialState: function() {
//List out different states that ListComponent could possibly have
return {
  showList: true,
  listType: this.props.type

这样写有性能优势吗？

【问题讨论】：

在过去，这使调试更容易。现在调试器足够智能，可以推断名称，请参阅astithas.com/talks/qconsf2013/#/18/2
@Oriol 仍然比在整个堆栈跟踪中看到名为匿名的函数要好。 :P
@Oriol 对于递归函数或需要内部绑定标识符来引用自身的函数（有点）重要。
@Pointy 我假设函数内的代码没有引用该名称。但是，是的，名称函数表达式替换了已弃用的 arguments.callee。
所以你显示的是编译后的代码？原始来源是什么？

标签： javascript reactjs react-jsx babeljs

【解决方案1】：

没有性能影响，除了可能因为文件大小而导致加载时间。

命名其他匿名函数有助于解决问题，因为这些名称出现在大多数浏览器的错误堆栈跟踪中。

This 视频很好地解释了将名称设置为匿名函数时会发生什么。

此行为也已包含在 ECMA262 ES6 语言规范中。你可以检查here。

【讨论】：

非常感谢@toskv。这真的帮助我理解了一些东西。
这是 Ben Nadel 谈论此事的视频链接。谢谢@Oriol vimeo.com/128582253
@AnveshChecka 这很好地解释了为什么应该命名函数。你介意我把它包括在答案中吗？ :)
对于那些好奇的人，虽然 devtools 已经这样做了一段时间，但这种行为现在也是 ES6 规范的一部分：ecma-international.org/ecma-262/6.0/… 注意第 6 步：“如果 hasNameProperty 为 false，则执行 SetFunctionName （值，bindingId）。”
@toskv 请继续

【解决方案2】：

ES6 规范根据函数的上下文定义了许多显式设置匿名函数名称的位置，即使没有显式定义函数名称也是如此。这里有一堆例子。

12.2.6.9:

var o = {foo: function(){}};
o.foo.name === 'foo';

12.14.4:

var foo;
foo = function(){};
foo.name === 'foo';

12.14.5.2:

var {foo = function(){}} = {};
foo.name === 'foo';

var [foo = function(){}] = [];
foo.name === 'foo';

12.14.5.3:

var foo;
([foo = function(){}] = []);
foo.name === 'foo'

12.15.5.4:

var foo;
({foo = function(){}} = {});
foo.name === 'foo'

13.3.1.4:

let foo = function(){};
foo.name === 'foo'

13.3.2.4:

var foo = function(){};
foo.name === 'foo'

13.3.3.6:

function fn([foo = function(){}]){
    foo.name === 'foo';
}
fn([]);

function fn2({foo = function(){}}){
    foo.name === 'foo';
}
fn2({});

14.1.19:

export default function(){};

import foo from './self'; // Made-up circular ref.
foo.name === 'default';

14.3.9:

var o = {foo(){}};
o.foo.name === 'foo';
class cls {foo(){}};
cls.prototype.foo.name === 'foo';

【讨论】：