如何在函数作用域外部共享动态加载的Class

错误原因解析 #

动态import()函数返回的是模块对象，而非直接导出的成员。你之前的错误代码中，MyClass = await import('../modules/myClass.js') 是把整个模块对象赋值给了MyClass变量，这个对象包含所有导出成员（比如这里的MyClass属性），直接new MyClass()相当于实例化模块对象，自然会抛出"MyClass is not a constructor"错误。

正确解决方案 #

方案1：解构赋值到外部变量

let MyClass;

window.initialize = async () => {
  // 用括号包裹解构语句，避免被解析为块级作用域
  ({ MyClass } = await import('../modules/myClass.js'));
  // 此时外部作用域的MyClass已指向类构造器
  let myClassInstance = new MyClass();
}

方案2：直接提取模块中的构造器

let MyClass;

window.initialize = async () => {
  const module = await import('../modules/myClass.js');
  MyClass = module.MyClass;
  let myClassInstance = new MyClass();
}

注意事项 #

因为initialize是异步函数，外部作用域的MyClass在initialize执行完成前是undefined，必须确保初始化完成后再调用new MyClass()，比如通过等待initialize()的Promise完成：

// 外部使用示例
async function useMyClass() {
  await window.initialize();
  const instance = new MyClass();
}

你的工厂函数写法虽然可行，但完全没必要——直接将类构造器本身赋值到外部变量，代码更简洁、语义更清晰。

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