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

不言
Lepaskan: 2018-04-02 14:02:40
asal
1221 orang telah melayarinya

本篇文章给大家分享的是关于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 = '丰田佳美';
Salin selepas log masuk

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
    }
});
Salin selepas log masuk

如果你希望自己去实现原型模式,而不直接使用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();
Salin selepas log masuk

总结:

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

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

相关推荐:

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

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

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

Atas ialah kandungan terperinci JavaScript设计模式系列四:原型模式. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan