原型模式
原型模式:用原型实例指向创建对象的类,使用于创建新的对象的类共享原型对象的属性以及方法。
父类总是要被子类继承的,如果将属性和方法都写在父类的构造函数里会有一些问题,比如每次子类继承都要创建一次父类,假如父类的构造函数中创建时存在很多耗时的逻辑,或者每次初始化都要做一些重复性的东西,这样性能消耗还是蛮大的。为了提高性能,我们需要一种共享机制。原型模式就是将可复用的,可共享的、耗时大的从父类中提出来,然后放在其原型中,然后通过组合继承或者寄生组合式继承将方法和属性继承下来,对于子类中那些需要重写的方法进行重写,这样子类创建的对象既有子类的属性和方法,也共享了父类的原型方法。
以图片轮播为例:
//图片轮播
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