如何将JavaScript中的switch语句重构为多态并访问不同类

原来的switch语句需要逐个判断产品类型，手动控制DOM显示隐藏，后续新增类型时得修改switch分支，扩展性差。用多态可以把每个类型的逻辑封装独立，新增类型只需添加新的处理单元，不用改动原有代码。

方案一：对象字面量实现（轻量简洁） #

直接用对象映射每个产品类型的显示逻辑，不用类也能实现多态：

// 定义各产品类型的显示处理对象
const productDisplayHandlers = {
  DVD: {
    show() {
      document.querySelector('.DVD').classList.add('visible');
      document.querySelector('.Furniture').classList.remove('visible');
      document.querySelector('.Book').classList.remove('visible');
    }
  },
  Furniture: {
    show() {
      document.querySelector('.Furniture').classList.add('visible');
      document.querySelector('.DVD').classList.remove('visible');
      document.querySelector('.Book').classList.remove('visible');
    }
  },
  Book: {
    show() {
      document.querySelector('.Book').classList.add('visible');
      document.querySelector('.Furniture').classList.remove('visible');
      document.querySelector('.DVD').classList.remove('visible');
    }
  }
};

// 绑定下拉框事件
const productTypeSelect = document.querySelector('#productType');
productTypeSelect.addEventListener('change', function() {
  const handler = productDisplayHandlers[this.value];
  handler?.show(); // 可选链操作，避免类型不存在时报错
});

访问不同处理单元 #

想触发某个类型的显示，直接通过对象键名获取处理对象并调用show()：

• 显示DVD：productDisplayHandlers.DVD.show()
• 显示家具：productDisplayHandlers.Furniture.show()

方案二：类继承实现（面向对象多态） #

通过父类定义统一接口，子类重写具体逻辑，更符合传统面向对象的多态思想：

// 父类：定义基础逻辑，统一隐藏所有元素
class ProductDisplay {
  show() {
    document.querySelectorAll('.DVD, .Furniture, .Book').forEach(el => {
      el.classList.remove('visible');
    });
  }
}

// DVD子类：重写show方法，显示对应元素
class DVDDisplay extends ProductDisplay {
  show() {
    super.show(); // 先调用父方法隐藏所有
    document.querySelector('.DVD').classList.add('visible');
  }
}

// 家具子类
class FurnitureDisplay extends ProductDisplay {
  show() {
    super.show();
    document.querySelector('.Furniture').classList.add('visible');
  }
}

// 书籍子类
class BookDisplay extends ProductDisplay {
  show() {
    super.show();
    document.querySelector('.Book').classList.add('visible');
  }
}

// 建立类型与类的映射
const displayClassMap = {
  DVD: DVDDisplay,
  Furniture: FurnitureDisplay,
  Book: BookDisplay
};

// 绑定下拉框事件
const productTypeSelect = document.querySelector('#productType');
productTypeSelect.addEventListener('change', function() {
  const DisplayClass = displayClassMap[this.value];
  if (DisplayClass) {
    const display = new DisplayClass();
    display.show();
  }
});

访问不同类 #

1. 通过displayClassMap获取对应类：比如displayClassMap['DVD']得到DVDDisplay类；
2. 实例化类：const dvdDisplay = new DVDDisplay();；
3. 调用统一的show()方法：dvdDisplay.show()。

不管哪种方案，后续新增产品类型时，只需要添加对应的处理对象或子类，更新映射表即可，无需修改原有事件逻辑，扩展性更强。

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