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 设计模式》中。

》

巴特西

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

最新文章

热门文章