js设计模式语言之魂——原型模式

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

基于原型链实现对象之间的继承,这种继承是基于一种对方法或属性的共享,而不是对方法和属性的复制。

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

//图片轮播
var LoopImages = function (imgArr,container) {
    this.imageArray = imgArr;//轮播图片数组
    this.container = container;//轮播图片容器
}
LoopImages.prototype = {
    //创建轮播图片
    createImage : function () {
        console.log('LoopImages createImage function');
    },
    //切换下一张图片
    changeImage:function () {
        console.log('LoopImages changeImage function');
    }
}
//上下滑动切换类
var SlideLooImg = function (imgArr,container) {
    //构造函数继承图片轮播类
    LoopImages.call(this,imgArr,container);
}
SlideLooImg.prototype = new LoopImages();
//重写继承的切换下一张图片方法
SlideLooImg.prototype.changeImage = function () {
    console.log('SlideLoopImg changeImg function');
}
//渐隐切换类
var FadeLoopImg = function (imgArr,container,arrow) {
    LoopImages.call(this,imgArr,container);
    //切换箭头私有变量
    this.arrow = arrow;
}
FadeLoopImg.prototype = new LoopImages();
FadeLoopImg.prototype.changeImage = function () {
    console.log('FadeLoogImg changeImage function');
}
//实例化一个渐隐切换图片类
var fadeImg = new FadeLoopImg(['01.img','02.img','03.img'],'slide',['left.jpg','right.jpg']);
//测试用例
console.log(fadeImg.container);//slide
fadeImg.changeImage();//FadeLoogImg changeImage function

原型的拓展

原型对象是一个共享的对象,无论是父类的实例对象还是子类的继承,都是对它的一个指向引用,所以原型对象才会被共享。在任何时候,都可以对基类或者子类进行方法的拓展,并且所有被实例化的对象或者类都能获取这些方法。

//原型的拓展
LoopImages.prototype.getImageLength = function () {
    return this.imageArray.length;
}
FadeLoopImg.prototype.getContainer = function () {
    return this.container;
}
console.log(fadeImg.getImageLength());//3
console.log(fadeImg.getContainer());//slide

请大神多多指点。qq:274501366

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值