语言之魂---- 原型模式 2022-11-18

/**
 * 原型模式概念
 * 原型模式就是将原型对象指向创建对象的类，使这些类共享原型对象的方法与属性。
 * 当然javascript是机遇原型连实现对象之间的继承，这种继承是基于一种对属性或者方法对共享，而不是对属性和方法对复制。
 */

// 案例一：创建一个焦点图也就是轮播图

// 图片轮播类
var LoopImages = function(imgArr,container) {
    this.imagesArray = imgArr; // 轮博图片数组
    this.container = container; // 轮博图片容器
    this.createImage = function() {}; // 创建轮播图片
    this.changeIamge = function() {}; // 切换下一张图片
}

// 创建一个左右切换箭头的例子

// 上下滑动切换类
var SlideLoopImg = function(imgArr,container) {
    // 构造函数继承图片轮播类
    LoopImages.call(this,imgArr,container);
    // 重写继承的切换下一张图片的方法
    this.changeIamge = function() {
        console.log('SlideLoopImg chengImage function')
    }
}

// 渐隐切换类
var FadeLoopImg = function (imgArr,container,arrow) {
    LoopImages.call(this,imgArr,container)
    // 切换箭头私有变量
    this.arrow = arrow;
    this.changeIamge = function() {
        console.log('FadeLoopImg changeImage function')
    }
}

// 测试一下
// 我们创建一个显隐轮播图片测试实例很容易
// 实例化一个渐隐切换图片类
var fadeImg = new FadeLoopImg([
    '01.jpg',
    '02.jpg',
    '03.jpg',
    '04.jpg',   
],'slide',['left,jpg','right,jpg'])
// fadeImg.changeIamge();

// 以上方法将属性都写在基类的构造函数里会有一些问题，就是每次创建子类，都要做一些重复性的动作。
// 原型模式就是将可复用，可共享的，耗时大的从基类中提取出来，然后放在其原型中，然后子类通过组合继承或者寄生组合式继承而
// 将方法和属性继承写在，对于子类中哪些需要重写的方法进行重写，这样子类创建的对象即具有子类的属性和方法也共享了基类的原型方法。

// 最优解决方案：
// 实例代码

// 图片轮播类
var LoopImages = function(imgArr,container) {
    this.imagesArray = imgArr; // 图片轮播数组
    this.container = container
}
LoopImages.prototype = {
    // 创建轮播图片
    createImage: function() {
        console.log('LoopImages createIamge function')
    },
    // 切换下一张图片
    changeIamge: function () {
        console.log('LoopImages changeIamge function');
    }
}
// 上下滑动切换类

var SlideLoopImg = function (imgArr, container) {
    // 构造函数继承图片轮播类
    LoopImages.call(this, imgArr, container)
} 
SlideLoopImg.prototype = new LoopImages(); // 不知道为什么要写这一步？
// 充血继承的切换下一张图片方法
SlideLoopImg.prototype,changeIamge = function () {
    console.log('SlideLoopImg chengImage function')
}
// 渐隐切换类
var FadeLoopImg = function (imgArr, container, arrow) {
    LoopImages.call(this, imgArr, container)
    // 切换箭头私有变量
    this.arrow = arrow
}
FadeLoopImg.prototype = new LoopImages(); // 不知道为什么要写这一步？
FadeLoopImg.prototype.changeIamge = function() {
    console.log('FadeLoopImg changeImage function');
}

var fadeImg = new FadeLoopImg([
    '01.jpg',
    '02.jpg',
    '03.jpg',
    '04.jpg',   
],'slide',['left,jpg','right,jpg'])
fadeImg.changeIamge();

// 测试用例
console.log(fadeImg.container);
fadeImg.changeIamge()