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

由于文件大小，可能没有性能损失，除了加载时间。

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

This视频可以很好地解释当您为匿名函数设置名称时会发生什么。

这种行为也包含在ECMA262 ES6语言规范中。您可以查看here。

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

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

2 个答案: