今天在重构一个项目的时候，遇到了一个诡异的bug，调试过程中发现，原来是Function的name的属性丢失导致的。

后来出于好奇研究了下Javascript中Function/Class的name属性，这里和大家分享下。

事情是这样的，我在重构一段代码，去除new Function这种用法，换成正常的function。为便于理解，代码做了简化，原代码如下：

1const factory = (type) => {
2  var code = "return function Func_" + type + "(){}";
3  var Node = new Function(code)();
4  return Node;
5};
6
7console.log(factory('abc').name)
8// => Func_abc

优化的时候，我最初改成了如下的版本：

1const factory = (type) => {
2  return (() => () => {})()
3};
4
5console.log(factory('abc').name)
6// => undefined

这里() => () => {}看似与`new Function(code)的功能一致，其实已经丢失了name属性。

为function添加name是比较简单的，像如下版本的代码，就可以设置function name为def。

1const factory = (type) => {
2  return (() => function def() {})()
3};
4
5console.log(factory('abc').name)
6// => def

但是如何使其支持动态名称呢？

其实也比较简单，先设置个 object，再取它的属性就可以了：

1const factory = (type) => {
2  const name = `Func_${type}`
3  return {
4    [name]: () => {}
5  }[name]
6};
7
8console.log(factory('abc').name)
9// => abc

就是这样简单。

Function与Class基本同理，如果换成Class的版本，代码如下：

1const factory = (type) => {
2  const name = `Func_${type}`
3  return {
4    [name]: class {}
5  }[name]
6};
7
8console.log(factory('abc').name)
9// => abc