JavaScript设计模式 (1) 原型模式

原型模式(Prototype)：用原型实例指向创建类对象，使用于创建新对象的类共享原型对象的属性以及方法。

 //图片轮播类
 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.changeImage = 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');
 };

原型继承

原型模式更多的是用在对象的创建上。比如创建一个实例对象的构造函数比较复杂，或者耗时比较长，或者通过创建多个对象来实现。此时我们最好不要用new关键字去复制这些基类，但可以通过对这些对象属性或者方法进行负责来创建实例，这是原型模式的最初思想。如果涉及多个对象，我们也可以通过原型模式来实现对新对象的创建。那么首先要有一个原型模式的对象复制方法。

/**********
*基于已经存在的模版对象克隆出新对象的模式
*arguments[0],arguments[1],arguments[2]:参数1，参数2.参数3表示模版对象
*注意。这里对模版引用类型on个的属性实质上进行了浅复制（引用类型属性共享），当然根据需求可以自行深复制。
******/
function prototypeExtend() {
    var F = function () { },
        args = arguments,
        i = 0,
        len = args.length;
    for (var i = 0; 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('跳跃动作');
    }
});

既然通过prototypeExtend创建的是一个对象，我们就无需再用new去创建新的实例对象，我们可以直接使用这个对象。

penguin.swim();//游泳速度 20
penguin.run(10);//奔跑速度 10
penguin.jump();//跳跃动作

学习《JavaScript 设计模式》 中。

》