How to implement the prototype pattern in JavaScript

Overview

The prototype pattern refers to the type of object created by the prototype instance, and new objects are created by copying these prototypes. It is a pattern used to create objects, that is, to create an object as the prototype property of another object;

Prototype warning: Before learning about the prototype mode, you need to first learn about prototype, prototype chain, prototype, __proto__, constructor and other knowledge;

Implementing the Prototype Pattern

ES5 API: Object.create(prototype, optionalDescriptorObjects)

The Object.create() method receives two parameters: the first parameter is the __proto__ object, and the second is the prototiesObject (optional, the second parameter can be used to initialize additional properties, accepting literal object form);

var vehiclePrototype = {
    model:"Porsche",
    getModel: function () {
        console.log('The vehicle model is: ' + this.model);
    }
};

var vehicle = Object.create(vehiclePrototype,{
    "model":{
        value:"Ferrari"
    }
});

vehicle.getModel(); //Vehicle model is: Ferrari

We use Object.create to actually create a new object vehiclePrototype, and inherit the methods of vehiclePrototype, so at this time vehicle.__proto__ == vehiclePrototype;

The value of "model" is initialized in the second parameter, and the value of model is initialized to "Ferrari", so at this time there is only one model in the newly created object vehiclePrototype, and the value is "Ferrari";

Instead of using Object.create(), use prototype:

var vehiclePrototype = {
    init: function (carModel) {
        this.model = carModel || "Porsche";
    },
    getModel: function () {
        console.log('The vehicle model is: ' + this.model);
    }

};

function vehicle(model) {
    function F() { };
    F.prototype = vehiclePrototype;    
    var f = new F();
    f.init(model);
    return f;
}
var car = vehicle('Ferrari');
car.getModel(); // The vehicle model is: Ferrari

In the above code, we can see that the core is in vehicle. We first create a new constructor, then point the prototype of the function to vehiclePrototype, then instantiate the function, and finally call the init method on prototype after inheritance. Finally, returning the execution result can also be achieved;

Summarize

The prototype pattern is ubiquitous in JavaScript, and many other patterns are also implemented based on prototype, so it is important to study and review the knowledge of prototype and prototype chain, with an emphasis on key attribute knowledge points such as prototype, __proto__, constructor, etc.

The above is the details of how to implement the prototype pattern with JavaScript. For more information about the JavaScript prototype pattern, please pay attention to other related articles on 123WORDPRESS.COM!