设计模式——原型模式（TypeScript版）

一、定义

用原型实例指定创建对象的种类，并且通过拷贝这些原型，创建新的对象。简言之就是通过克隆来创建一个一模一样的对象。

二、javascript中原型和原型链

与java、C#这样以类为中心的编程语言不同，javascript是基于原型的面向对象编程语言，其根本就是原型和原型链，为了更好的理解JavaScript中的实现原型模式，首先了解一下JavaScript中的原型和原型链。

2.1 原型

原型（prototype）：每一个对象都包含一个原型属性，用于关联另一个对象，关联后就能使用那个对象的属性和方法，这其实就是JavaScript的原型式继承。对象字面量的原型是Object.prototype;如果使用new创建的对象，那么它的原型是构造函数的prototype的属性值。除了null、Object.prototype等少数几个没有原型的对象之外，大部分都具有原型，并且是一个继承自Object.prototype的原型。

2.2 原型链

每一个对象都包含一个原型属性，用于关联另一个对象，关联后就能够使用那个对象的属性和方法；对象之间通过原型关联到一起，就好比用一条锁链将一个个对象连接在一起，在与各个对象挂钩后，最终形成了一条原型链。

2.3 实例、原型、构造函数之间关系

• 实例.proto === 原型
• 原型.constructor === 构造函数
• 构造函数.prototype === 原型
• 实例.constructor === 构造函数

  

  JavaScript就是通过原型来对内容进行共享，则将需要克隆的内容挂载到其原型链上即可。

三、代码实现

对于ES5，提供Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。

对于ES6，提供Object.setPrototypeOf()方法设置一个指定的对象的原型(即,内部[[Prototype]]属性)到另一个对象或 null。

利用JavaScript实现代码如下：

function Dog() {
    this.name = "lili";
    this.birthYear = 2015;
    this.sex = "男";
    this.presentYear = 2018;

    this.getDiscription = () => {
        return `狗狗叫${this.name},性别${this.sex},${this.presentYear}年${this.presentYear - this.birthYear}岁了`
    }
}

const dog = new Dog();
console.log(dog.getDiscription());// 狗狗叫lili,性别男,2018年3岁了
dog.presentYear = 2020;// 修改了当前年份
const dog1 = Object.create(dog);// 通过ES5语法进行创建
//const dog1 = {}
//Object.setPrototypeOf(dog1, dog);//通过ES6语法进行创建
console.log(dog.getDiscription());// 狗狗叫lili,性别男,2020年5岁了

利用TypeScript版本：

• 下图为原型模式的通用类图

  

• TypeScript代码实现

interface Prototype {
    clone():Prototype;
}

class Dog implements Prototype {
    public name: string;
    public birthYear: number;
    public sex: string;
    public presentYear: number;
    constructor() {
        this.name = "lili";
        this.birthYear = 2015;
        this.sex = "男";
        this.presentYear = 2018;
    }

    public getDiscription(): string {
        return `狗狗叫${this.name},性别${this.sex},${this.presentYear}年${this.presentYear - this.birthYear}岁了`
    }

    // 实现复制
    public clone(): Prototype {
        return Object.create(this);
    }
}

// 使用
const dog = new Dog();
console.log(dog.getDiscription());
dog.presentYear = 2020;
const dog1 = Object.create(dog);
console.log(dog1.getDiscription());

四、优点

1. 创建新的对象比较复杂时，可以利用原型模式简化对象的创建过程，同时也能够提高效率。
2. 不用重新初始化对象，而是动态地获得对象运行时的状态
3. 如果原始对象发生变化（增加或者减少属性），其它克隆对象也会发生相应的变化，无需修改代码。

五、缺点

需要为每一个类配备一个克隆方法，这对全新的类来说不是很难，但对已有的类进行修改时，需要修改其源代码，违背了ocp原则。

六、应用场景

1. 创建成本比较大的场景。
2. 需要动态的获取当前的对象运行时状态的场景。

欢迎大家关注公众号