原型模式
原型模式 （Prototype）：用原型实例指向创建对象的类，使用于创建新的对象的类共享原型对象的属性以及方法。
通过一个简单的例子，来认识一下：
//构造函数
function Person() {}
// 原型属性 Prototype
Person.prototype.name = '老王'
Person.prototype.sayName = function () {
console.log(this.name)
}
let person1 = new Person()
person1.sayName() // 老王
let person2 = new Person()
person2.sayName() // 老王
console.log(person1.sayName == person2.sayName); // true
由此可见，原型模式就是将原型对象指向创建对象的类，使这些类共享原型对象的方法与属性。本质上来讲，这也是一种继承，一种基于对属性或方法的共享，而不是，对属性或方法的复制。
important！它是浅拷贝。
那么，我们如何将之运用到实际项目中去呢？
在工作中，我们经常需要写轮播图，切换轮播图的方式多种多样，如上下切换，左右切换，缩放切换等等，这个时候，我们抽象出一个基类，让不同的特效去继承这个基类，然后重写继承下来的属性或者方法，从而实现不同的效果。
// 基类
let LoopImages = function (imgArr, container) {
this.imgArr = imgArr; // 轮播图片数组
this.container = container; // 轮播图片容器
this.createImage = function () {} // 创建轮播图
this.changeImage = function () {} // 切换下一张图
}
// 上下切换
let SlideLoopImg = function (imgArr, container) {
//构造函数继承图片轮播类
LoopImages.call(this, imgArr, container);
// 重写继承的切换方法
this.changeImage = function() {
console.log('上下切换')
}
}
// 淡入淡出
let FadeLoopImg = function (imgArr, container, arrow) {
LoopImages.call(this, imgArr, container);
this.arrow = arrow
this.changeImage = function() {
console.log('淡入淡出')
}
}
let fadeImg = new FadeLoopImg([
'1.jpg',
'2.jpg',
'3.jpg'
], 'slide', [
'left.jpg',
'right.jpg'
]);
fadeImg.changeImage(); // 淡入淡出
这样一个轮播图的实现方案便可以随意食用啦。但是我们看到，每次子类继承父类时，我们都要创建一次父类。倘若，父类的构造函数中创建时，存在很多耗时较长的逻辑，这对性能的消耗是个不小的影响。那么为了提高性能，我们可以将可复用的、可共享的，耗时长的从基类中提取出来，放入原型中，然后通过组合继承或者寄生组合继承来继承方法和属性。
// 基类
let LoopImages = function (imgArr, container) {
this.imgArr = imgArr; // 轮播图片数组
this.container = container; // 轮播图片容器
}
LoopImages.prototype = {
// 创建轮播图
createImage = function () {
console.log('创建轮播图')
},
// 切换下一张图
changeImage = function () {
console.log('切换下一张图')
}
}
// 上下切换
let SlideLoopImg = function (imgArr, container) {
//构造函数继承图片轮播类
LoopImages.call(this, imgArr, container);
}
SlideLoopImg.prototype = new LoopImages();
// 重写继承的切换方法
SlideLoopImg.prototype.changeImage = function () {
console.log('上下切换')
}
// 淡入淡出
let FadeLoopImg = function (imgArr, container, arrow) {
LoopImages.call(this, imgArr, container);
this.arrow = arrow
}
FadeLoopImg.prototype = new LoopImages();
FadeLoopImg.prototype.changeImage = function () {
console.log('淡入淡出')
}
fadeImg.changeImage(); // 淡入淡出
原型模式有一个特点，在任何时候，都可以对基类或者子类进行方法的拓展，而且，所有被实例化的对象或者类都能获取这些方法。
emmmm...freedom！过于自由的方式，可能会导致一些问题，比如，修改类的属性或方法，可能会影响到其他人。
写在最后
国庆长假刚过，对于前端开发者而言，最近Vue3.0 Alpha预览版的到来，算是一个重磅消息。新版本所带来的优化让 Vue 更加高效、更加模块化且更加易于使用。与此同时，也说明正式版距离我们越来越近了，而学不动三个字，是一份自嘲，更像是一份鞭策，让我们在终生学习的道路上，越走越荒凉。加油吧，骚年们！
