原型模式

原型模式:用原型实例指向创建对象的类,使用于创建新的对象的类共享原型对象的属性以及方法

需求1:创建轮播图

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

需求2:轮播图可能会有不同的切换方式:上下切换、左右切换、渐隐切换
优化1:抽象出一个基类,让不同切换方式的类去基础基类,对于差异性的需求通过重写继承下来的属性或者方法

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

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

//实例化一个渐隐切换图片类
const fadeImg = new FadeLoopImg(
        ['1.png','2.png','3.png'],
        'slide',
        ['left.png','right.png']
    )
fadeImg.changeImage();

问题:每次子类继承都要创建一个父类,若父类构造函数有耗时较长的逻辑,每次初始化都要坐一些重复性的东西,性能消耗很大
优化2:简单有差异的属性放在构造函数中,消耗资源较多的方法放在基类的原型中

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

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

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


//实例化一个渐隐切换图片类
const fadeImg = new FadeLoopImg(
        ['1.png','2.png','3.png'],
        'slide',
        ['left.png','right.png']
    )
fadeImg.changeImage();

问题:基类的构造函数比较复杂、消耗性能时,多个子类的重复继承多次,消耗性能、耗时也会多次
优化3:不要通过new关键字去复制基类,而是通过对这些对象属性或者方法进行复制来实现创建

/*
* 基于已经存在的模板对象克隆出新对象的模式
* 参数为模板对象
* 注意:这里对模板引用类型的属性进行了浅复制(引用类型属性共享),当根据需求可以自行深复制(引用类型属性复制)
*/
function prototypeExtend(...args){
    const F = function(){} //缓存类,为实例化返回对象临时创建
    for(let i = 0,l=args.length;i

你可能感兴趣的:(原型模式)