ES模块+Webpack环境下，类A能否实例化继承自A的类B？

给定以下存在循环导入的ES模块代码（注：原代码存在导入导出不匹配问题，先明确问题核心）：

原代码示例 #

A.js #

import B from "B.js" // 默认导入，但B.js为命名导出，将导致B为undefined

export class A {
  constructor() {}
  fct() {
    this.b = new B();
  }
}

B.js #

import A from "A.js" // 默认导入，但A.js为命名导出，将导致A为undefined

export class B extends A {
  constructor() {}
}

核心问题分析 #

首先，原代码的导入导出不匹配会直接导致导入变量为undefined，后续代码必然报错。即使修正为匹配的导入导出方式（统一使用命名/默认导出），依然存在循环模块依赖的问题，此时Webpack构建执行时会失败，无法实例化B对象，原因如下：

ES模块的执行遵循「解析→实例化→执行」的流程，处理循环依赖时：

• 加载A.js时，会触发B.js的加载；
• 加载B.js时，又会请求加载A.js，此时A.js处于「加载中」状态，B.js拿到的是A模块未初始化的导出绑定；
• B.js执行class B extends A时，A的导出绑定还未被赋值（A.js尚未执行到类A的定义代码），此时A为undefined，会抛出TypeError: Class extends value undefined is not a constructor or null，模块加载直接失败，无法进入实例化A并调用fct的阶段。

可行的修正方案 #

要让这种循环继承的类结构正常工作，可通过动态导入延迟加载B模块，避免顶层循环导入：

修正后的A.js #

export class A {
  constructor() {}
  async fct() {
    // 仅在调用方法时动态导入B模块，此时A已完成初始化
    const { default: B } = await import("./B.js");
    this.b = new B();
  }
}

修正后的B.js #

import A from "./A.js";

export default class B extends A {
  constructor() {}
}

此时Webpack可正常构建，调用A实例的fct方法时，能成功实例化B对象。

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