JavaScript Design Pattern Series 4: Prototype Pattern

This article shares with you the fourth series of JavaScript design patterns: prototype mode. Friends who are interested can take a look.

The code of this series has been uploaded to the GitHub address JavaScript design pattern demo

What is the prototype pattern

Prototype pattern (Prototype pattern): In layman's terms, it means creating a shared prototype and creating new objects by copying these prototypes. Used to create repeated objects, this type of design pattern is a creational pattern, which provides a good choice for creating objects.

Implementing the prototype mode

We can implement the prototype mode through JavaScript's unique prototype inheritance feature, that is, creating an object as the prototype attribute value of another object. We can also use Object.create (prototype, optionalDescriptorObjects) to implement prototype inheritance.

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

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

The Object.create() method will use the specified prototype object and its properties to create a new object.

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

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

If you want to implement the prototype pattern yourself instead of using Object.create directly. You can use the following code to achieve this.

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();

Summary:

The prototype mode is to create a shared prototype and create a new class by copying this prototype, which is used to create repeated objects and improve performance.

Referenced from Uncle Tom’s Blog Design Pattern Prototype Pattern

Related recommendations:

JavaScript Design Pattern Series 1: Factory Pattern

JavaScript Design Pattern Series 2: Singleton Pattern

JavaScript Design Pattern Series 3: Builder Pattern

The above is the detailed content of JavaScript Design Pattern Series 4: Prototype Pattern. For more information, please follow other related articles on the PHP Chinese website!