原型模式(Prototype),用原型实例指向创建对象的类,使用于创建新的对象的类共享原型对象的属性以及方法。
/**
* Created by whatled on 2017/3/12.
*/
// 图片轮播类
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 = function () {
console.log(’SlideLoopImg changeImage 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(’FadeLoopImg changeImage function’);
};
LoopImages.prototype.getImageLength = function () {
return this.imagesArray.length;
};
FadeLoopImg.prototype.getContainer = function () {
return this.container;
};
// 测试用例
var fadeImg = new FadeLoopImg([’01,jpg’,
’02.jpg’,
’03.jpg’,
’04.jpg’], ’slide’, [
’left.jpg’,
’right.jpg’
]);
console.log(fadeImg.container); // slide
fadeImg.changeImage(); // fadeLoopImg ChangeImage function
console.log(fadeImg.getImageLength());
console.log(fadeImg.getContainer());
// 对模版引用类型的属性实质上进行了浅复制
function prototypeExtend() {
var F = function () {
},
args = arguments,
i = 0,
len = args.length;
for (; i < len; i++) {
// 遍历每个模版对象中的属性
for (var j in args[i]) {
// 将这些属性复制到缓存类原型中
F.prototype[j] = args[i][j];
}
}
// 返回缓存类的一个实例
return new F();
}
var penguin = prototypeExtend({
speed: 20,
swim: function () {
console.log(’游泳速度’ + this.speed);
}
}, {
run: function (speed) {
console.log(’奔跑速度’ + speed);
}
}, {
jump: function () {
console.log(’跳跃动作’);
}
});
// 测试
penguin.swim(); // 游泳速度20
penguin.run(10); // 奔跑速度10
penguin.jump(); // 跳跃动作
