原文：https://addyosmani.com/resources/essentialjsdesignpatterns/book/#factorypatternjavascript

工厂函数是另一个与创建对象概念有关的的创建式模式。它与同类型的其他模式的区别在于它并明确的要求我们使用构造函数。相反，工厂可以提供一个普通的接口来创建对象，借助这个方法我们可以指定希望工厂创建对象的类型。

想象一下，我们有一个 UI 工厂，在工厂中我们被要求创建一种 UI 组件类型。我们不是直接使用 new 操作符或者通过其他创建构造器来创建组件，而是向工厂对象请求新组件。我们告知工厂我们需要的对象的类型是什么（如：Button、Panel），然后工厂来负责实例化它，并把实例返回给我们来使用。

这在对象的创建过程相对复杂的情况下很好用，例如，创建过程强依赖动态的因素或者程序的配置信息。

这个模式的示例可以在如 ExtJS 之类的 UI 库中找到，这些库中用于创建对象或者组件的方法可以进一步子类化。
下面的示例是基于我们之前用构造器模式创建 Car 的代码片段。它演示了如何使用工厂模式来实现一个车辆工厂：

  1. // Types.js - 定义了后续场景中要用的一些构造函数
  3. // 用于定义 Car 的构造函数
  4. function Car(options) {
  5.   // 一些属性
  6.   this.doors = options.doors || 4;
  7.   this.state = options.state || 'brand new';
  8.   this.color = options.color || 'silver';
  9. }
  11. // 用于定义 trucks 的构造函数
  12. function Truck(options) {
  13.   this.state = options.state || 'used';
  14.   this.wheelSize = options.wheelSize || 'large';
  15.   this.color = options.color || 'blue';
  16. }
  18. // FactoryExample.js
  20. // 定义一个核心的汽车工厂
  21. function VehicleFactory() {}
  23. // 定义这个工厂的原型和对应的工具函数
  25. // 我们默认的车的类是 Car
  26. VehicleFactory.prototype.vehicleClass = Car;
  28. // 用于创建新车实例的工厂函数
  29. VehicleFactory.prototype.createVehicle = function(options) {
  30.   switch (options.vehicleType) {
  31.     case 'car':
  32.       this.vehicleClass = Car;
  33.       break;
  34.     case 'truck':
  35.       this.vehicleClass = Truck;
  36.       break;
  37.     // 默认的 VehicleFactory.prototype.vehicleClass 是 Car
  38.   }
  40.   return new this.vehicleClass(options);
  41. };
  43. // 创建一个制造 car 的工厂实例
  44. var carFactory = new VehicleFactory();
  45. var car = carFactory.createVehicle({
  46.   vehicleType: 'car',
  47.   color: 'yellow',
  48.   doors: 6
  49. });
  51. // 测试我们的 car 是否是由 vehicleCalss/prototype Car 创建的
  53. // 输出： true
  54. console.log(car instanceof Car);
  56. // 输出： Car object of color "yellow", doors: 6 in a "brand new" state
  57. console.log(car);

方法一：通过修改 VehicleFactory 实例来使用 Truck 类

  1. var movingTruck = carFactory.createVehicle({
  2.   vehicleType: 'truck',
  3.   state: 'like new',
  4.   color: 'red',
  5.   wheelSize: 'small'
  6. });
  8. // 测试我们的 truck 是否是通过 vehicleClass/prototype Truck 创建的
  10. // 输出：true
  11. console.log(movingTruck instanceof Truck);
  13. // 输出：Truck object of color "red", a "like new" state and a "small" wheelSize
  14. console.log(movingTruck);

方法2：实现一个 VehicleFactory 的子类来创建一个用于建造 trucks 的工厂类

  1. function TruckFactory() {}
  2. TruckFactory.prototype = new VehicleFactory();
  3. TruckFactory.prototype.vehicleClass = Truck;
  5. var truckFactory = new TruckFactory();
  6. var myBigTruck = truckFactory.createVehicle({
  7.   state: 'omg..so bad.',
  8.   color: 'pink',
  9.   wheelSize: 'so big'
  10. });
  12. // 确认 myBigTruck 是否是通过 Truck 原型来创建的
  13. // 输出：true
  14. console.log(myBigTruck instanceof Truck);
  16. // 输出：Truck object with the color "pink", wheelSize "so big" 
  17. // and state "omg. so bad"
  18. console.log(myBigTruck);

什么时候使用工厂模式

在下面这些情况下，工厂模式尤其好用：

  • 当我们的对象或者组件的建立很复杂的时候
  • 当我们需要根据当前所处的环境来轻易的生成不同的实例对象时
  • 当我们处理很多共享着相同属性的小对象或者组件时
  • 当用只需满足特定 API 规范(也就是 “鸭子类型”)的其他对象来组成目标对象时。这对去耦合很有用。

什么时候不要使用工厂函数

当应用在错误的问题类型时，这个模式会给程序带来不必要的复杂性。除非为对象提供创造接口是我们所编写的库或者框架的目的，否则我都坚持建议显示的使用构造器来避免不必要的开销。

由于创建对象的过程是完全抽象在接口背后，这就可能会引发单元测的问题，它取决于这个过程的复杂程度。

抽象工厂

了解 抽象工厂 模式也很有用，该模式旨在将一组具有共同目标的单独工厂封装起来。它将一组对象的实现细节同其通用用法分离开来。

抽象工厂是在当系统必须独立于生成对象的方式，或者它需要使用多种类型对象时使用。

一个简单且容易理解的例子就是车辆工厂，它定义了获取和注册车辆的类型的方式。抽象工厂函数可以被命名为 abstractVehicleFactory。抽象工厂函数支持定义像 “car” 或者 “truck” 这样的车辆类型，具体的工厂只要实现满足车辆规范的类即可（如 Vehicle.prototype.drive 和 Vehicle.prototype.breakDown ）。

  1. var abstractVehicleFactory = (function() {
  2.   // 储存我们的车辆 类型
  3.   var types = {};
  5.   return {
  6.     getVehicle: function(type, customizations) {
  7.       var Vehicle = types[type];
  9.       return Vehicle ? new Vehicle(customizations) : null;
  10.     },
  12.     registerVehicle: function(type, Vehicle) {
  13.       var proto = Vehicle.prototype;
  15.       // 只注册满足车辆规范的类
  16.       if (proto.drive && proto.breakDown) {
  17.         types[type] = Vehicle;
  18.       }
  20.       return abstractVehicleFactory;
  21.     }
  22.   };
  23. })();
  25. // 用法：
  26. abstractVehicleFactory.registerVehicle('car', Car);
  27. abstractVehicleFactory.registerVehicle('truck', Truck);
  29. // 基于抽象的车辆类型来实例化一个新的汽车
  30. var car = abstractVehicleFactory.getVehicle('car', {
  31.   color: 'lime green',
  32.   state: 'like new'
  33. });
  35. // 使用相似的方式实例化一个新的卡车
  36. var truck = abstractVehicleFactory.getVehicle('truck', {
  37.   wheelSize: 'medium',
  38.   color: 'neon yellow'
  39. });