匿名函数与命名函数之间的差异作为对象键的值

Question

我使用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

这样的写作是否有任何性能优势？

Answer 1

没有性能损失,除了因文件大小而导致的加载时间.

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

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

此行为也包含在ECMA262 ES6语言规范中.你可以在这里查看.

Answer 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';