JavaScript设计模式——原型模式

原型模式

原型模式 （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 更加高效、更加模块化且更加易于使用。与此同时，也说明正式版距离我们越来越近了，而学不动三个字，是一份自嘲，更像是一份鞭策，让我们在终生学习的道路上，越走越荒凉。加油吧，骚年们！