抽象工厂模式用于创建一组相互依赖的对象家族而不指定具体类，适用于UI组件库等需统一风格的场景。通过定义抽象产品和工厂接口，由具体工厂如浅色或深色主题工厂实现对象创建，确保同族产品协同工作。示例中按钮和输入框按主题统一渲染，客户端可切换整套界面风格而无需修改代码。优势包括解耦、易扩展产品族、保证兼容性，但新增产品类型需修改所有工厂，违反开闭原则。JavaScript中可用构造函数模拟抽象类，适合大型应用维护。
当需要创建一组相关或相互依赖的对象，而无需指定其具体类时，JavaScript 中的抽象工厂模式提供了一个优雅的解决方案。它强调“产品族”的统一创建，确保来自同一工厂的对象能够协同工作。
抽象工厂核心思想
抽象工厂不是创建单一对象，而是创建对象家族。比如：现代 UI 组件库中，按钮、输入框、弹窗应风格一致；不同主题（如深色、浅色）对应不同的组件实现，但调用方式保持统一。
关键在于定义抽象接口，由具体工厂决定实例化哪个具体产品。
实现结构与代码示例
通过构造函数或 ES6 类模拟抽象类和继承关系，利用多态实现解耦。
立即学习“Java免费学习笔记（深入）”；
// 抽象产品 - 按钮 function Button() { if (new.target === Button) { throw new Error("Button is abstract!"); } } Button.prototype.render = function () { throw new Error("render not implemented"); };// 抽象产品 - 输入框 function Input() { if (new.target === Input) { throw new Error("Input is abstract!"); } } Input.prototype.render = function () { throw new Error("render not implemented"); };
// 具体产品 - 浅色主题按钮 function LightButton() {} LightButton.prototype = Object.create(Button.prototype); LightButton.prototype.render = function () { console.log("渲染浅色按钮"); };
// 具体产品 - 深色主题按钮 function DarkButton() {} DarkButton.prototype = Object.create(Button.prototype); DarkButton.prototype.render = function () { console.log("渲染深色按钮"); };
// 具体产品 - 浅色输入框 function LightInput() {} LightInput.prototype = Object.create(Input.prototype); LightInput.prototype.render = function () { console.log("渲染浅色输入框"); };
// 具体产品 - 深色输入框 function DarkInput() {} DarkInput.prototype = Object.create(Input.prototype); DarkInput.prototype.render = function () { console.log("渲染深色输入框"); };
// 抽象工厂 function UIComponentFactory() { if (new.target === UIComponentFactory) { throw new Error("UIComponentFactory is abstract!"); } } UIComponentFactory.prototype.createButton = function () { throw new Error("createButton not implemented"); }; UIComponentFactory.prototype.createInput = function () { throw new Error("createInput not implemented"); };
// 具体工厂 - 浅色主题工厂 function LightThemeFactory() {} LightThemeFactory.prototype = Object.create(UIComponentFactory.prototype); LightThemeFactory.prototype.createButton = function () { return new LightButton(); }; LightThemeFactory.prototype.createInput = function () { return new LightInput(); };
// 具体工厂 - 深色主题工厂 function DarkThemeFactory() {} DarkThemeFactory.prototype = Object.create(UIComponentFactory.prototype); DarkThemeFactory.prototype.createButton = function () { return new DarkButton(); }; DarkThemeFactory.prototype.createInput = function () { return new DarkInput(); };
// 使用示例 const factory = new DarkThemeFactory(); const button = factory.createButton(); const input = factory.createInput();
button.render(); // 输出：渲染深色按钮 input.render(); // 输出：渲染深色输入框
适用场景与优势
这种方案适合以下情况：
- 系统要独立于产品的创建、组合与表示
- 需要一组相互关联或依赖的对象被一起使用
- 强调一系列产品对象的设计一致性（即属于同一家族）
- 提供一个产品类库，而只想暴露接口而非实现
优势包括：隔离具体类、易于交换产品族、保证产品间兼容性、客户端无需修改即可切换整套界面风格。
注意事项与局限
扩展新产品族容易，比如新增“高对比度主题”只需添加对应工厂和产品类。但增加新产品类型困难，例如新增“下拉框”，则所有工厂都要修改接口，违反开闭原则。
在 JavaScript 动态语言中，有时可通过对象字面量和工厂函数简化实现，但在大型应用中，类结构更利于维护和类型推导。
基本上就这些。抽象工厂帮你管理成套对象的创建逻辑，让代码更具组织性和可扩展性。
