Skip to content

Instantly share code, notes, and snippets.

@banyudu
Created June 25, 2020 14:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save banyudu/194536f1faea0990c286c8b43a65aa8d to your computer and use it in GitHub Desktop.
Save banyudu/194536f1faea0990c286c8b43a65aa8d to your computer and use it in GitHub Desktop.
Javascript动态类名

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

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

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

const factory = (type) => {
  var code = "return function Func_" + type + "(){}";
  var Node = new Function(code)();
  return Node;
};

console.log(factory('abc').name)
// => Func_abc

优化的时候,我最初改成了如下的版本:

const factory = (type) => {
  return (() => () => {})()
};

console.log(factory('abc').name)
// => undefined

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

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

const factory = (type) => {
  return (() => function def() {})()
};

console.log(factory('abc').name)
// => def

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

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

const factory = (type) => {
  const name = `Func_${type}`
  return {
    [name]: () => {}
  }[name]
};

console.log(factory('abc').name)
// => abc

就是这样简单。

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

const factory = (type) => {
  const name = `Func_${type}`
  return {
    [name]: class {}
  }[name]
};

console.log(factory('abc').name)
// => abc
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment