三言两语说透设计模式的艺术-原型模式

提升对象创建效率：原型模式的智慧

原型模式（Prototype Pattern）是一种创造型设计模式，其核心思想在于通过复制"原型"来创建对象，而非直接实例化。在原型模式中，我们首先创造一个原型对象，接着通过对其进行复制，获得新的实例。这些原型对象储存在一个共享的"原型管理器"中，当需要新的对象时，只需从管理器获取原型的复制。

原型模式的实现

让我们以一个具体场景为例，考虑开发一个鸭子养殖游戏。游戏中需要生成两种鸭子：北京鸭和绿头鸭。这两种鸭子共享一些属性和方法，如叫声、游泳和渲染模型，但叫声和渲染模型是不同的。

如果每次都从头创建鸭子对象，将会产生大量冗余代码，如下所示：

ts 复制代码

const duck1 = {
  name: '鸭子1',
  quack() {},
  swim() {},
  render() {}
};

const duck2 = {
  name: '鸭子2',
  quack() {},
  swim() {},
  render() {}
};

这种方式重复定义相同的 quack 和 swim 方法，效率低下。如果使用简单工厂模式，代码如下：

ts 复制代码

function createDuck(type) {
  let duck;

  if (type === 'beijing') {
    duck = new BeijingDuck(); 
  } else if (type === 'greenheaded') {
    duck = new GreenHeadedDuck();
  }

  duck.swim = function() {
    console.log('swimming...');
  }  

  duck.render = function() { 
    console.log('render duck model...')
  }

  return duck; 
}

const beijingDuck = createDuck('beijing'); 
const greenDuck = createDuck('greenheaded');

但是，这样每次创建鸭子对象都需要重新定义 swim 和 render 方法，不够高效。

更优雅的方式是将共有部分提取为一个原型：

ts 复制代码

// 鸭子原型
const DuckPrototype = {
  swim() {},
  render() {} 
};

// 创建具体鸭子时复制原型
function createBeijingDuck() {
  const duck = Object.create(DuckPrototype);  
  duck.quack = function() {}
  
  return duck;
}

function createGreenDuck() {
  const duck = Object.create(DuckPrototype);
  duck.quack = function() {}  
  
  return duck; 
}

以上代码展示了如何在鸭子游戏中应用原型模式。通过原型模式，我们只需定义一次共有属性和方法，然后通过复制原型来实例化新对象。这避免了重复代码，提高了对象创建效率，并建立了对象之间的关系，方便基于原型进行扩展。

原型模式与相关模式的区别：

在工厂方法模式中，对象创建逻辑在工厂内部，而原型模式通过复制原型来创建对象。
单例模式生成唯一实例，而原型模式可以生成多个相似实例。
建造者模式适用于创建过程复杂的对象，而原型模式适用于对象实例化复杂的情况。

那么，如何使用 TypeScript 实现更优雅的原型模式呢？

ts 复制代码

// 原型接口
interface Prototype {
  clone(): Prototype; 
}

// 原型管理器类
class PrototypeManager {
  private prototypes: {[key: string]: Prototype} = {};

  // 省略方法定义
}

// 具体原型类
class ConcretePrototype implements Prototype {
  clone() {
    return Object.create(this);
  }
}

// 使用
// 初始化原型管理器
const manager = new PrototypeManager();

// 设置原型对象
manager.set('proto', new ConcretePrototype());  

// 请求原型复制实例化
const prototypeInstance = manager.get('proto').clone();

以上代码定义了原型接口、原型管理器类和具体原型类，还提供了简单的使用示例。从示例中可以看出，原型模式的关键是通过原型管理器来复制原型对象从而创建实例。

原型模式的优缺点

原型模式的主要优点包括：

提高实例化对象的效率：通过复制原型对象，避免了重复的初始化操作。
隐藏实例化的复杂度：客户端不需要了解具体的对象创建过程，只需请求原型的复制即可。
避免构造函数污染：由于实例化是通过复制原型对象实现的，无需向构造函数中添加不必要的代码。
动态添加和删除原型：可以在运行时扩展或减少原型对象，客户端可以直接使用新增的原型来实例化对象。

原型模式的缺点包括：

需要定义接口并确保每个具体原型类都实现了该接口，增加了一定的开发成本。
需要注意原型实例和原型之间的关系，例如修改原型会影响到其他实例。

应用场景

原型模式在以下场景中常见应用：

对象创建成本较高：通过复制原型来提高效率，例如在游戏中创建怪物对象。
系统需要产生预定义原型的实例：例如用于测试的假日期对象或假支付账单对象。
类的初始化需要参数：通过原型模式避免构造函数过于复杂。
需要动态地创建复杂对象：客户端只需要关注如何获取对象，无需了解具体创建过程。

以下是一些建议，在前端开发中更适合使用原型模式的情况：

1、创建组件类的原型：通过创建组件类的原型对象，使用 Object.create() 方法基于该原型快速创建组件实例，从而避免重复编写组件逻辑。

ts 复制代码

// 原型类
const ComponentPrototype = {
  // 组件逻辑
  render() {
    // ...
  }
};

// 基于原型创建实例 
const ComponentInstance = Object.create(ComponentPrototype);

2、复用和配置原型对象：设计一些可配置的原型对象，如 API 配置对象，然后复制和配置这些原型来生成不同的实例，避免重复创建。

ts 复制代码

// 可配置的原型
const APIConfigPrototype = {
  baseURL: 'https://example.com',
  timeout: 1000,
};

// 复制原型并配置生成实例
const config = Object.assign({}, APIConfigPrototype, {
  timeout: 3000  
});

3、代理原型对象：通过原型对象实现代理，避免每次访问都重新创建目标对象。

ts 复制代码

// 原型作为代理对象
const proxyPrototype = {
  target: null,
  get(key) {
    // 懒加载
    if (!this.target) {
      this.target = createTargetObject(); 
    }
    return this.target[key];
  }
}

// 使用代理原型 
const proxy = Object.create(proxyPrototype);
proxy.foo // 触发代理逻辑

原型模式与 JavaScript 中的 Prototype

原型模式和 JavaScript 中的原型继承（prototype）存在以下主要区别：

原型模式是一种设计模式，是抽象的概念，而 JavaScript 中的 prototype 是一种具体的继承实现机制。
原型模式的核心在于原型管理器，用于存储和管理不同的原型对象。而 JavaScript 中的 prototype 属性是函数的一个属性，指向包含由该函数创建的对象共享的属性和方法的对象。
原型模式通过复制原型对象来创建新的实例，原型与实例之间没有必然的关系。而 JavaScript 中的原型继承是建立原型和实例之间的关系，实例通过 proto 属性关联到原型，可以直接访问原型的属性和方法。
原型模式可以创建多个相似的对象实例，是一种对象复用的方式。而 JavaScript 中的原型继承是实现类继承的方式，通过 prototype 属性建立原型链，主要用于实现对象的继承和复用。
原型模式中，原型对象和实例对象通常相互隔离，修改实例不会影响到原型。而在 JavaScript 原型继承中，修改原型会影响到所有实例，因为实例引用了原型。
原型模式可以动态注册和删除原型，而 JavaScript 中的原型关系是在首次实例化时建立的，之后不可更改。

综上所述，原型模式是一种更抽象和全面的对象复用方式，而 JavaScript 中的原型继承只是一种具体的继承实现方式，它们在核心思想上有所不同。然而，它们在提高实例化效率方面具有一定的相似性。

总结

原型模式是一种创造型设计模式，通过复制现有对象的原型来创建新对象，提高对象创建效率和复用性。核心思想是在一个原型对象的基础上，通过复制来生成新实例，避免重复初始化。

在实际开发中，原型模式优化对象创建，通过共享原型对象避免重复定义属性和方法，提高代码效率。例如，前端可用于创建组件实例，避免重复编写组件逻辑。

实现原型模式包括创建原型对象，然后通过复制原型创建新实例。原型对象通常存储于原型管理器中，供需要创建对象时复制使用。

与JavaScript的原型继承不同，原型模式更抽象灵活。它动态添加删除原型，避免构造函数污染，隐藏实例化复杂性。注意每具体原型需实现接口，增加开发成本。

总之，原型模式通过复制对象的原型创建新对象，提高对象创建效率和复用性。频繁创建相似对象场景下，原型模式是有用设计模式。