In depth understanding of JavaScript series (42) : prototyping of design patterns

introduce

The prototype pattern (prototype) refers to using prototype instances to point to the kinds of objects that are created, and creating new objects by copying these prototypes.

The body of the

For the stereotype pattern, we can take advantage of JavaScript's unique stereotype inheritance feature to create objects, that is, one object is created as the prototype attribute value of another object. The prototype object itself effectively takes advantage of the object created by each constructor. For example, if a constructor prototype contains an name property (see the example below), the object created by this constructor will have this property.

Looking at the definition of the stereotype pattern in the existing literature, there is no reference to JavaScript, and you may find that much of the instruction is about classes, but the reality is that JavaScript, based on prototype inheritance, completely avoids the concept of classes (class). We simply copy from an existing object to create the object.

True prototype inheritance is proposed as the latest version of the ECMAScript5 standard, which USES the Object.create method to create such an object. This method creates a specified object whose prototype has the specified object (the first parameter object passed in by the method) and can also contain other optional specified properties. For example, Object.create (prototype, optionalDescriptorObjects) can also be seen in the following example:

//  You don't use uppercase because it's not a constructor 

var someCar = {

    drive: function () { },

    name: ' Mazda  3'

};
//  use Object.create create 1 A new car x

var anotherCar = Object.create(someCar);

anotherCar.name = ' Toyota camry ';

Object.create run you inherit directly from other objects, and with the second parameter of the method, you can initialize additional properties. Such as:

var vehicle = {

    getModel: function () {

        console.log(' The mold of the vehicle is: ' + this.model);

    }

};
var car = Object.create(vehicle, {

    'id': {

        value: MY_GLOBAL.nextId(),

        enumerable: true //  The default writable:false, configurable:false

 },

    'model': {

        value: ' ford ',

        enumerable: true

    }

});

Here, you can use the object literal in the second argument of Object.create to pass in additional properties to be initialized, with the syntax of the Object.defineProperties or Object.defineProperty method types. It allows you to set the properties of properties, such as enumerable, writable, or configurable.

If you want to implement the prototype pattern yourself, instead of directly using Object.create. You can use code like this for the above example:

var vehiclePrototype = {

    init: function (carModel) {

        this.model = carModel;

    },

    getModel: function () {

        console.log(' The vehicle mold is: ' + this.model);

    }

};


function vehicle(model) {

    function F() { };

    F.prototype = vehiclePrototype;
    var f = new F();
    f.init(model);

    return f;

}
var car = vehicle(' ford Escort');

car.getModel();

conclusion

The prototype mode is used almost everywhere in JavaScript, and many other modes are based on prototype, so I won't mention it, but it's still the shallow copy and the deep copy that you need to pay attention to to avoid reference problems.