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

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

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

2原型模式的实现

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

如果每次都从头创建鸭子对象，将会产生大量冗余代码，如下所示：OG928资讯网——每日最新资讯28at.com

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

这种方式重复定义相同的 quack 和 swim 方法，效率低下。如果使用简单工厂模式，代码如下：OG928资讯网——每日最新资讯28at.com

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 方法，不够高效。OG928资讯网——每日最新资讯28at.com

更优雅的方式是将共有部分提取为一个原型：OG928资讯网——每日最新资讯28at.com

// 鸭子原型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; }

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

原型模式与相关模式的区别：OG928资讯网——每日最新资讯28at.com

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

那么，如何使用 TypeScript 实现更优雅的原型模式呢？OG928资讯网——每日最新资讯28at.com

// 原型接口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();

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

3原型模式的优缺点

原型模式的主要优点包括：OG928资讯网——每日最新资讯28at.com

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

原型模式的缺点包括：OG928资讯网——每日最新资讯28at.com

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

4应用场景

原型模式在以下场景中常见应用：OG928资讯网——每日最新资讯28at.com

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

以下是一些建议，在前端开发中更适合使用原型模式的情况：OG928资讯网——每日最新资讯28at.com

1）创建组件类的原型：通过创建组件类的原型对象，使用 Object.create() 方法基于该原型快速创建组件实例，从而避免重复编写组件逻辑。OG928资讯网——每日最新资讯28at.com

// 原型类const ComponentPrototype = {  // 组件逻辑  render() {    // ...  }};// 基于原型创建实例 const ComponentInstance = Object.create(ComponentPrototype);

2）复用和配置原型对象：设计一些可配置的原型对象，如 API 配置对象，然后复制和配置这些原型来生成不同的实例，避免重复创建。OG928资讯网——每日最新资讯28at.com

// 可配置的原型const APIConfigPrototype = {  baseURL: 'https://example.com',  timeout: 1000,};// 复制原型并配置生成实例const config = Object.assign({}, APIConfigPrototype, {  timeout: 3000  });

3）代理原型对象：通过原型对象实现代理，避免每次访问都重新创建目标对象。OG928资讯网——每日最新资讯28at.com

// 原型作为代理对象const proxyPrototype = {  target: null,  get(key) {    // 懒加载    if (!this.target) {      this.target = createTargetObject();     }    return this.target[key];  }}// 使用代理原型 const proxy = Object.create(proxyPrototype);proxy.foo // 触发代理逻辑

5原型模式与 JavaScript 中的 Prototype

原型模式和 JavaScript 中的原型继承（prototype）存在以下主要区别：OG928资讯网——每日最新资讯28at.com

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

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

6总结

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

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

实现原型模式包括创建原型对象，然后通过复制原型创建新实例。原型对象通常存储于原型管理器中，供需要创建对象时复制使用。OG928资讯网——每日最新资讯28at.com

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

总之，原型模式通过复制对象的原型创建新对象，提高对象创建效率和复用性。频繁创建相似对象场景下，原型模式是有用设计模式。OG928资讯网——每日最新资讯28at.com

本文链接：http://www.28at.com/showinfo-26-5142-0.html三言两语说透设计模式的艺术-原型模式

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： Rust“巨坑”？真相来了！

下一篇： 字节客户端也疯狂拷打基础！