如何在JavaScript中覆盖类？动态加载主题类失效问题求助

问题根源 #

1. 脚本加载是异步的，切换主题时若立刻调用theme.fn1，新脚本可能还未加载完成，导致仍使用旧实例。
2. 全局theme变量的声明/赋值逻辑不严谨，重复加载脚本时可能出现变量覆盖不及时的情况。
3. 旧主题实例若被其他代码缓存引用，会导致调用逻辑仍指向旧方法。

方案一：封装异步加载逻辑，确保实例更新 #

1. 修改主题加载函数（封装为Promise）

function loadTheme(thm) {
  // 移除已存在的同主题脚本，避免重复加载
  const existingScript = document.querySelector(`script[src="./themes/${thm}/theme.js"]`);
  if (existingScript) {
    existingScript.remove();
  }

  return new Promise((resolve, reject) => {
    const script = document.createElement("script");
    script.src = `./themes/${thm}/theme.js`;
    script.type = "text/javascript";
    
    script.onload = () => {
      // 脚本加载完成后，返回新的主题实例
      resolve(window.theme);
    };
    script.onerror = (err) => reject(err);
    
    document.head.appendChild(script);
  });
}

2. 修改theme.js的全局赋值逻辑

class theme_obj{
    fn1(){
      console.log("Im thm1");
    }
    fn2(){
    }
    // 可选：添加销毁方法清理主题副作用（如事件监听、DOM元素）
    destroy() {
      // 此处写清理逻辑，比如移除绑定的事件、删除主题添加的DOM
    }
}
// 直接赋值给全局window.theme，避免var重复声明的问题
window.theme = new theme_obj();

3. 切换主题时等待加载完成再调用方法

async function switchTheme(thm) {
  try {
    // 先清理旧主题的副作用
    if (window.theme && typeof window.theme.destroy === 'function') {
      window.theme.destroy();
    }
    // 等待新主题加载完成
    const newTheme = await loadTheme(thm);
    // 此时调用的就是新主题的方法
    newTheme.fn1();
  } catch (err) {
    console.error("加载主题失败:", err);
  }
}

方案二：使用ES模块动态导入（更模块化） #

1. 将theme.js改为ES模块

export class theme_obj{
    fn1(){
      console.log("Im thm1");
    }
    fn2(){
    }
    destroy() {
      // 清理逻辑
    }
}
export default new theme_obj();

2. 用动态import加载主题

async function switchTheme(thm) {
  try {
    // 清理旧主题
    if (window.theme && typeof window.theme.destroy === 'function') {
      window.theme.destroy();
    }
    // 动态导入新主题模块
    const themeModule = await import(`./themes/${thm}/theme.js`);
    const newTheme = themeModule.default;
    // 赋值给全局（如果需要全局使用）
    window.theme = newTheme;
    // 调用新主题方法
    newTheme.fn1();
  } catch (err) {
    console.error("加载主题失败:", err);
  }
}

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