JS设计模式——原型模式

什么是原型模式？

原型模式属于创建型模式。是基于现有对象模版，通过克隆的方式创建新的对象。

解决什么问题？

比如定义一个 person1 的对象

const person1 = {
	name: 'zkk',
	age: 18,
	sex: 'male',
	hobby: 'daydream',
	sayName: function() {
		console.log(this.name)
	}
}

再定义一个 person2 对象

const person2 = {
	name: 'yy',
	age: 18,
	sex: 'female',
	hobby: 'wander',
	sayName: function() {
		console.log(this.name)
	}
}

我们发现 person1 和 person2 定义了相同的属性，如此定义对象，生成了大量的重复代码，也没有达到代码复用的目的。

如何解决上面的问题呢？

高程在第六章 6.2 创建对象一节，作者提出了很多解决方法，比如工厂模式，构造函数模式。其中就有原型模式。通过原型模式实现继承是解决的此类问题的关键。与此同时，所有子对象的函数，都指向模版对象（原型）中定义的同一个函数，而不是创建自己的单独拷贝，因此带来了性能的提升。

实现

如果是基于类构建对象的其他语言（如 Java），为了实现原型模式，可能还需要继承接口等一系列操作。但是 JS 本身就是基于原型设计的语言，我们可以通过 Object.create 来实现原型模式。

// 定义原型
const person = {
	name: '',
	age: 0,
	sex: '',
	hobby: '',
	sayName: function() {
		console.log(this.name)
	}
}

// 通过原型克隆新对象
const person1 = Object.create(person)
person1.name = 'zkk'
person1.sayName() // => 'zkk'

// Object.create 还可以提供第二个参数,来初始化对象属性。
const person1 = Object.create(person, {
    name: {
        value: 'zkk'
    }
})

我们也可以模拟 Object.create 的实现

function createObj(obj) {
	function F(){}
	F.prototype = obj
	return new F()
}

这里使用到了构造函数，但没有初始化的部分，仅仅是希望将对象链接至原型。

在实际的使用场景中，我们也会组合构造器模式和原型模式，一起来创建对象。