frontend
发布于: 2020-06-25作者: 鱼肚最后更新: 2020-11-24
今天在重构一个项目的时候,遇到了一个诡异的bug,调试过程中发现,原来是Function的name的属性丢失导致的。
后来出于好奇研究了下Javascript中Function/Class的name属性,这里和大家分享下。
事情是这样的,我在重构一段代码,去除new Function
这种用法,换成正常的function。为便于理解,代码做了简化,原代码如下:
1 2 3 4 5 6 7 8
const factory = (type) => { var code = "return function Func_" + type + "(){}"; var Node = new Function(code)(); return Node; }; console.log(factory('abc').name) // => Func_abc
优化的时候,我最初改成了如下的版本:
1 2 3 4 5 6
const factory = (type) => { return (() => () => {})() }; console.log(factory('abc').name) // => undefined
这里() => () => {}
看似与`new Function(code)的功能一致,其实已经丢失了name属性。
为function添加name是比较简单的,像如下版本的代码,就可以设置function name为def
。
1 2 3 4 5 6
const factory = (type) => { return (() => function def() {})() }; console.log(factory('abc').name) // => def
但是如何使其支持动态名称呢?
其实也比较简单,先设置个 object,再取它的属性就可以了:
1 2 3 4 5 6 7 8 9
const factory = (type) => { const name = `Func_${type}` return { [name]: () => {} }[name] }; console.log(factory('abc').name) // => abc
就是这样简单。
Function与Class基本同理,如果换成Class的版本,代码如下:
1 2 3 4 5 6 7 8 9
const factory = (type) => { const name = `Func_${type}` return { [name]: class {} }[name] }; console.log(factory('abc').name) // => abc