javascript设计模式--原型模式

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

创建一个焦点图

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

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

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

创建一个图片轮播的实例很容易

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

原型模式就是将可复用的,可共享的,耗时大的,从基类中提出来然后放在原型中,然后子类通过祝贺继承或者寄生组合式继承而将方法和属性继承下来,对于子类中那些需要重写的方法进行重写,这样子类创建的对象既具有子类的属性和方法也共享了基类的原型方法.

//图片轮播类
var LoopImages = function(imgArr,container){
    this.imagesArray = imgArr; //轮播图片数组
    this.container = container; //轮播图片容器
}
LoopImages.prototype = {
    //创建轮播图片
    createImage : function(){
        console.log('LoopImages createImage function');
    },
    changeImage : function(){
        console.log('LoopImages changeImage function');
    } 
}
//上下滑动切换类
var SlideLoopImg = function(imgArr,container){
    //构造函数继承图片轮播类
    LoopImages.call(this,imgArr,container);
}
SlideLoopImg.prototype = new LoopImages();
//重写继承的切换下一张图片方法
SlideLoopImg.prototype.change = function(){
    ....
}

原型模式得到的实例既具有子类的方法和属性,也具有父类的方法和属性.

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

左钦杨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值