JavaScript抽象类创建子类实例报错：Super表达式必须为null或函数

你遇到的报错核心是循环模块依赖加上类初始化时机不匹配导致的。咱们拆解下代码里的逻辑矛盾：

1. Unit 抽象类导入了 Archer 具体类，还在 getComposite 方法里直接实例化 Archer
2. Archer 类又必须导入 Unit 作为父类，形成了 Unit ↔ Archer 的双向循环引用

在JavaScript/TypeScript的模块加载机制中，当模块互相引用时，会优先加载依赖模块，但这里的情况是：加载 Unit 模块时需要导入 Archer，可 Archer 又得先导入 Unit 完成继承——这就导致 Archer 类在 Unit 尝试实例化它的时候，还处于未完全初始化的状态（类似变量的暂时性死区），所以JS引擎会抛出类似 Cannot access 'Archer' before initialization 的错误。

既然你明确这只是示例，我给你几个可行的修复思路：

1. 动态导入延迟实例化 #

把实例化逻辑改成动态导入，避开模块加载阶段的循环依赖：

// Unit.ts
export abstract class Unit {
    public abstract bombardStrength(): number;
    public abstract defensiveStrength(): number;
    public async getComposite(): Promise<void> {
        // 调用方法时才动态加载Archer，避免初始化阶段的循环
        const { Archer } = await import("@/Entities/Army/Individual/Archer");
        console.log(new Archer());
    }
}

2. 拆分实例化逻辑到外部 #

遵循抽象类不依赖具体实现的设计原则，把创建实例的逻辑移到独立的工厂类/函数中：

// UnitFactory.ts
import { Unit } from "@/Entities/Army/Unit";
import { Archer } from "@/Entities/Army/Individual/Archer";

export class UnitFactory {
    static createArcher(): Unit {
        return new Archer();
    }
}

// Unit.ts
import { UnitFactory } from "@/Entities/Army/UnitFactory";
export abstract class Unit {
    public abstract bombardStrength(): number;
    public abstract defensiveStrength(): number;
    public getComposite(): void {
        console.log(UnitFactory.createArcher());
    }
}

3. TypeScript专属：类型导入分离 #

如果是TypeScript环境，可以把对Archer的导入改成类型导入，仅用于类型检查，避免运行时的循环依赖（但运行时实例化需要配合其他方式，比如全局注册）：

// Unit.ts
import type { Archer } from "@/Entities/Army/Individual/Archer";
export abstract class Unit {
    public abstract bombardStrength(): number;
    public abstract defensiveStrength(): number;
    public getComposite(): void {
        // 这里假设Archer已在全局注册，仅作示例
        const ArcherClass = (globalThis as any).Archer;
        console.log(new ArcherClass());
    }
}

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