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

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

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

成都创新互联公司专注于惠城企业网站建设,成都响应式网站建设,电子商务商城网站建设。惠城网站建设公司,为惠城等地区提供建站服务。全流程定制制作，专业设计，全程项目跟踪，成都创新互联公司专业和态度为您提供的服务

2原型模式的实现

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

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

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

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

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

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 方法，不够高效。

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

// 鸭子原型
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 实现更优雅的原型模式呢？

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

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

3原型模式的优缺点

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

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

原型模式的缺点包括：

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

4应用场景

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

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

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

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

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

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

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

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

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

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

// 原型作为代理对象
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）存在以下主要区别：

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

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

6总结

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

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

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

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

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

文章名称：三言两语说透设计模式的艺术-原型模式
转载源于：http://www.36103.cn/qtweb/news25/31475.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联