如何在函数内部获取其返回值被赋值的变量名？React扩展组件场景适用

结论 #

该需求无法通过纯JS运行时逻辑实现，原因是JS的表达式求值顺序优先于赋值操作：执行myFunc()/extend()的时候，赋值操作还未触发，运行时根本不知道当前表达式的返回值会被赋值给哪个变量，自然无法读取到左侧的变量名。

可行替代方案 #

1. 显式传入组件名（最推荐） #

成本最低、稳定性最高的方案，完全不受代码压缩、运行环境影响：

// 调用时多传一次组件名作为参数
const RedButton = extend(Button, 'RedButton')`
  color: red;
`;

const extend = (OriginalComponent, componentName) => {
  const newComponentName = componentName
  // 后续生成样式类名等逻辑
};

2. 编译期注入变量名 #

如果不想手动重复写变量名，可以通过Babel/TypeScript编译插件实现：在编译阶段识别const [变量名] = extend(...)的语法结构，自动把变量名作为参数注入到extend的调用参数中，生产环境代码压缩也不会影响正确性。

3. 运行时读取（不推荐） #

仅可用于本地开发调试场景，生产环境完全不可用：

• 依赖未压缩的代码，变量名没有被混淆
• 可以在组件赋值完成后读取newComponent.name，或者通过解析Error堆栈的方式尝试抓取变量名，但兼容性、稳定性极差，不同JS引擎的堆栈格式存在差异，代码压缩后变量名会被替换为短字符，直接失效。

额外说明 #

你提到的生成与组件名对应的样式类名的场景，现在主流的CSS-in-JS库默认已经做了对应处理，开发环境下会自动带上组件名作为类名前缀方便调试，生产环境会自动生成哈希类名避免冲突，不需要手动实现该逻辑。

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