React项目中动态为对象添加函数时的函数命名方案

静态定义的函数能拥有对应名称，核心是用了具名函数表达式（比如function atr2() {}），而动态循环中直接赋值匿名/箭头函数时，函数的name属性不会自动匹配对象键名。下面是几种可行的解决方法：

方法1：循环内创建具名函数表达式 #

在遍历键名时，为每个键生成对应名称的具名函数，让函数name属性与对象键名完全一致：

const targetKeys = ['atr2', 'paint2'];
const eqs2 = {};

targetKeys.forEach(key => {
  // 用具名函数表达式，函数名与当前循环的key保持一致
  eqs2[key] = function ${key}() {
    // 这里写入对应区域的重复逻辑
    console.log(`执行${key}的业务逻辑`);
  };
});

这种方式下，函数的name属性会被正确赋值，Chrome开发者工具控制台也会显示对应的函数名称。

方法2：手动通过Object.defineProperty设置name属性 #

如果所有函数的核心逻辑一致，可先定义通用函数，再为每个函数实例手动指定name属性：

const baseLogicFunc = () => {
  // 这里是所有区域共用的核心逻辑
};
const targetKeys = ['atr2', 'paint2'];
const eqs2 = {};

targetKeys.forEach(key => {
  const func = baseLogicFunc.bind(this); // 或复制核心逻辑生成新函数
  // 手动设置函数的name属性
  Object.defineProperty(func, 'name', {
    value: key,
    configurable: true
  });
  eqs2[key] = func;
});

关于静态函数控制台无名称的补充 #

如果静态定义的函数在Chrome控制台也不显示名称，基本是项目开启了代码压缩（比如生产环境的Terser压缩），压缩工具会移除函数名称以缩减体积。可以在开发环境关闭压缩，或者在压缩配置中开启保留函数名称的选项（比如Terser的keep_fnames参数）。

内容的提问来源于stack exchange，提问作者Canovice