如何在JavaScript中创建子类并避免循环引用（分文件存放）

你的代码出现循环引用的核心原因是：Parent.mjs在模块顶层导入了Sub.mjs，而Sub.mjs又必须导入Parent.mjs来完成继承，模块加载时形成了闭环依赖。下面提供两种可行的解决方案：

方案一：动态导入延迟加载子类 #

不在模块顶层直接导入子类，而是在需要使用子类的方法内部通过import()动态加载，避开模块初始化阶段的循环依赖：

// Parent.mjs
export default class Parent {
    static async createSomething() {
        // 仅在需要创建Sub时才动态导入
        const Sub = (await import('./Sub.mjs')).default;
        new Sub();
    }
}

// Sub.mjs
import Parent from './Parent.mjs';
export default class Sub extends Parent {
    constructor() {
        super(); // 子类构造函数必须调用super()
        console.log('Sub实例已创建');
    }
}

调用时需要处理异步逻辑：

// 使用示例
import Parent from './Parent.mjs';
await Parent.createSomething();
// 或者用.then链式调用
Parent.createSomething().then(() => console.log('创建完成'));

方案二：重构逻辑，抽离依赖到外部模块 #

如果不想使用异步逻辑，可以把创建子类的逻辑抽离到独立的工具模块，让父类和子类不再直接互相引用：

// Parent.mjs
export default class Parent {
    // 移除直接依赖Sub的逻辑
}

// Sub.mjs
import Parent from './Parent.mjs';
export default class Sub extends Parent {
    constructor() {
        super();
        console.log('Sub实例已创建');
    }
}

// Creator.mjs
import Parent from './Parent.mjs';
import Sub from './Sub.mjs';

// 给Parent添加静态方法，实现原有的创建逻辑
Parent.createSomething = () => {
    new Sub();
};

export default Parent;

调用时导入增强后的Parent：

// 使用示例
import Parent from './Creator.mjs';
Parent.createSomething();

注意事项 #

• 原代码中Sub类的构造函数拼写错误（contructor应为constructor），实际开发中必须修正，且子类构造函数必须调用super()才能正常初始化。

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