首页 >web前端 >js教程 >JavaScript设计模式系列四:原型模式

JavaScript设计模式系列四:原型模式

不言
不言原创
2018-04-02 14:02:401232浏览

本篇文章给大家分享的是关于JavaScript设计模式系列四:原型模式,有感兴趣的朋友可以看一下

本系列代码已上传到GitHub地址JavaScript设计模式demo

什么是原型模式

原型模式 (Prototype pattern):通俗点讲就是创建一个共享的原型,并通过拷贝这些原型创建新的对象。用于创建重复的对象,这种类型的设计模式属于创建型模式,它提供了一种创建对象的不错选择。

实现原型模式

我们可以通过JavaScript特有的原型继承特性去实现原型模式,也就是创建一个对象作为另一个对象的prototype属性值,我们也可以通过Object.create(prototype, optionalDescriptorObjects)来实现原型继承。

// 因为不是构造函数,所以不用大写
var someCar = {
    drive: function () { },
    name: '马自达 3'
};

// 使用Object.create创建一个新车x
var anotherCar = Object.create(someCar);
anotherCar.name = '丰田佳美';

Object.create() 方法会使用指定的原型对象及其属性去创建一个新的对象。

var vehicle = {
    getModel: function () {
        console.log('车辆的模具是:' + this.model);
    }
};

var car = Object.create(vehicle, {
    'id': {
        value: MY_GLOBAL.nextId(),
        enumerable: true 
 },
    'model': {
        value: '福特',
        enumerable: true
    }
});

如果你希望自己去实现原型模式,而不直接使用Object.create。你可以使用一下代码实现。

var vehiclePrototype = {
    init: function (carModel) {
        this.model = carModel;
    },
    getModel: function () {
        console.log('车辆模具是:' + this.model);
    }
};


function vehicle(model) {
    function F() { };
    F.prototype = vehiclePrototype;

    var f = new F();

    f.init(model);
    return f;
}

var car = vehicle('福特Escort');
car.getModel();

总结:

原型模式,就是创建一个共享的原型,通过拷贝这个原型来创建新的类,用于创建重复的对象,带来性能上的提升。

参考自汤姆大叔的博客设计模式之原型模式

相关推荐:

JavaScript设计模式系列一:工厂模式

JavaScript设计模式系列二:单例模式

JavaScript设计模式系列三:建造者模式

以上是JavaScript设计模式系列四:原型模式的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn