如何将带 super 调用的类转换为函数式构造器-js教程-PHP中文网

如何将带 super 调用的类转换为函数式构造器

本文详解如何将继承自父类（含 super() 调用）的 ES6 类，安全、语义等价地重构为纯函数式构造器，涵盖原型链绑定、Reflect.construct 使用、私有成员兼容性及实际 SignalStory 状态管理场景的迁移要点。

本文详解如何将继承自父类（含 `super()` 调用）的 es6 类，安全、语义等价地重构为纯函数式构造器，涵盖原型链绑定、`reflect.construct` 使用、私有成员兼容性及实际 signalstory 状态管理场景的迁移要点。

在现代 TypeScript/JavaScript 开发中，类（class）因其清晰的继承语法和工具链支持被广泛使用。但某些场景（如需动态构造、避免 new 限制、或与函数式编程范式对齐）会促使开发者将类转为函数式构造器。关键挑战在于：如何在不破坏 super() 行为的前提下，复现 extends 的原型链继承、实例初始化逻辑与 this 绑定？

✅ 正确思路：用 `Reflect.construct` 模拟 `super()` 调用

ES6 类本质是语法糖，其继承机制底层依赖 [[Prototype]] 链与 super() 对父类构造器的显式调用。纯函数无法直接调用 super，但可通过 Reflect.construct() 手动触发父类构造逻辑，并控制 this 上下文：

// 原始父类（保持不变，作为基础构造器）
class Registration {
  id = nanoid();
  mrn = 0;
  vn = 0;
}

// 函数式子类构造器 —— 等价于 `class RegistrationState extends Registration`
const RegistrationState = function (this: any, ...args: any[]) {
  // 1. 使用 Reflect.construct 调用父类构造器，确保 this 被正确初始化
  const instance = Reflect.construct(Registration, args, new.target);

  // 2. 在已初始化的 instance 上添加子类特有属性（替代 class 中的 this.xxx = xxx）
  instance.id = nanoid(); // 注意：若父类已有 id，此处会覆盖（与 class 行为一致）

  // 3. 初始化嵌套对象（对应原 class 中的 new Registration()）
  instance.domain = new Registration();
  instance.ui = new RegistrationUiState();

  return instance;
} as unknown as new () => TRegistrationState;

// 4. 显式设置原型链，使 instanceof 和方法继承生效
RegistrationState.prototype = Object.create(Registration.prototype);
RegistrationState.prototype.constructor = RegistrationState;

⚠️ 重要限制：该函数仍需用 new 调用（如 new RegistrationState()），否则 Reflect.construct 会抛错。若需彻底消除 new，可封装一层工厂函数：
const createRegistrationState = () => new RegistrationState();
// 或带参数版本：
const createRegistrationState = (init?: Partial<tregistrationstate>) => {
  const instance = new RegistrationState();
  Object.assign(instance, init);
  return instance;
};</tregistrationstate>

? 迁移 SignalStory Store 的注意事项

你原始代码中的 RegistrationStore 继承自 ImmutableStore<tregistrationstate></tregistrationstate>，其 constructor 内调用 super(...) 初始化状态。若要函数化整个体系，不建议将 ImmutableStore 本身转为函数（因其内部强依赖类生命周期），而应聚焦于 状态模型类（如 RegistrationState）的函数化：

// ✅ 推荐做法：仅函数化数据模型类，Store 保持 class
export class RegistrationStore extends ImmutableStore<tregistrationstate> {
  constructor() {
    super({
      name: 'RegistrationStore',
      mutationProducerFn: produce as unknown as MutationFn<tregistrationstate>,
      initialState: new RegistrationState(), // ← 此处 now calls the functional constructor
      plugins: [/* ... */],
    });
  }
}</tregistrationstate></tregistrationstate>

此时 initialState: new RegistrationState() 会正确执行函数体内逻辑，生成符合预期结构的初始状态对象。

? 总结：函数化不是“去掉 class”，而是精准模拟语义

Reflect.construct(target, args, newTarget) 是替代 super() 的核心 API，确保父类构造逻辑执行且 this 可扩展；
必须手动重建原型链（Object.create(Parent.prototype)），否则方法继承失效；
私有字段（#field）和私有方法无法在函数中直接访问，函数化仅适用于公有成员建模；
在 SignalStory 等状态库中，优先函数化 状态数据类，而非 Store 类，以兼顾可维护性与框架兼容性；
最终产出仍是构造器函数，调用方式为 new MyFunc()，语义上与 class 完全对齐。