Combining the constructor pattern with the prototype pattern
Constructor patterns are used to define instance properties, which are used to define methods and shared properties.
The most common way to create custom types is by combining the constructor pattern with the prototype pattern.
1. Create an Object
//combination using constructor mode and prototype mode function person(name, age, Job){ This. name = name; This. Age = Age; This. Job = job; This. Friend = ["Jenny","Court"];} Person.prototype = {Constructor:person,//constructor points to the object constructor, where its constructor is restored to point to the person constructor. Country:"China", ShowName: function(){Console.log ("name ="+ This. name); }}varP1 =NewPerson ("Mike.", -,"Student");varP2 =NewPerson ("Tom", at,"Teacher"); Console.log (p1); Console.log (p2);
As a result, each instance will have its own copy of the instance properties, but at the same time it shares a reference to the method, saving the memory to a minimum.
In addition, this blending mode also supports passing parameters to the constructor.
2. Differences
Looking at the code above, you will find that there is a difference: the Person.prototype constructor
property defaults to the object constructor.
Where do you know? Let's test it out.
//combination using constructor mode and prototype mode function person(name, age, Job){ This. name = name; This. Age = Age; This. Job = job; This. Friend = ["Jenny","Court"];}before the prototype mode is used, the constructor of the person constructor's prototype object points to the person constructor itselfConsole.log ("Person.prototype.constructor = = = Person:"); Console.log (Person.prototype.constructor = = = person); Console.log ("-----Split Line-----"); Person.prototype = {///Constructor:person,///general to be considered as set, revert its constructor to point to the person constructor, which is not set for demonstration purposes. Country:"China", ShowName: function(){Console.log ("name ="+ This. name); }}//Using prototype mode, we set Person.prototype to equal to a new object created as an object literal///So, here the constructor property becomes the constructor property of the new object, pointing to the object constructor. the constructor of the prototype object for the//person constructor points to the object constructorConsole.log ("Person.prototype ="); Console.log (Person.prototype); Console.log ("-----Split Line-----"); Console.log ("Person.prototype.constructor = = = Object:"); Console.log (Person.prototype.constructor = = =Object); Console.log ("-----Split Line-----"); Console.log ("person.prototype.__proto__ = = = Object.prototype:"); Console.log (person.prototype.__proto__ = = =Object. prototype);varP1 =NewPerson ("Mike.", -,"Student");varP2 =NewPerson ("Tom", at,"Teacher"); Console.log (p1); Console.log (p2);
Before prototype mode is used, the constructor of the person constructor's prototype object points to the person constructor itself.
Using prototype mode, we set Person.prototype to equal to a new object created as an object literal.
Therefore, the constructor property here becomes the constructor property of the new object, pointing to the object constructor.
Therefore, the constructor of the prototype object of the person constructor points to the object constructor.
3. Observe the prototype chain involved in the person constructor
Console.log ("Person.prototype="); Console.log (Person.prototype); Console.log ("-----Split Line-----"); Console.log ("Person.prototype.constructor = = = Person:");//trueConsole.log (Person.prototype.constructor = = = person);//trueConsole.log ("-----Split Line-----"); Console.log ("person.prototype.__proto__ = = = Object.prototype:");//trueConsole.log (person.prototype.__proto__ = = =Object. prototype);//trueConsole.log ("-----Split Line-----"); Console.log ("person.__proto__="); Console.log (person.__proto__); Console.log ("person.__proto__ = = = Function.prototype:"); Console.log (person.__proto__ = = =Function. prototype);//trueConsole.log ("-----Split Line-----");
4. Observe the prototype chain involved in the P1 instance object
Console.log ("P1.prototype="); Console.log (P1.prototype); Console.log ("-----Split Line-----"); Console.log ("p1.__proto__="); Console.log (p1.__proto__); Console.log ("p1.__proto__ = = = Person.prototype:"); Console.log (p1.__proto__ = = = Person.prototype);//trueConsole.log ("-----Split Line-----"); Console.log ("P1.__proto__.constructor = = = Person:"); Console.log (P1.__proto__.constructor = = = person); Console.log ("-----Split Line-----"); Console.log ("p1.__proto__.__proto__="); Console.log (p1.__proto__.__proto__); Console.log ("p1.__proto__.__proto__ = = = Object.prototype:"); Console.log (p1.__proto__.__proto__ = = =Object. prototype);//trueConsole.log ("-----Split Line-----");
5. Observe the function referenced by the P1.showname property
Console.log ("P1.showname.prototype="); Console.log (P1.showName.prototype); Console.log ("-----Split Line-----"); Console.log ("P1.showname.prototype.constructor="); Console.log (P1.showName.prototype.constructor); Console.log ("-----Split Line-----"); Console.log ("p1.showname.prototype.__proto__="); Console.log (p1.showname.prototype.__proto__); Console.log ("p1.showname.prototype.__proto__ = = = Object.prototype:"); Console.log (p1.showname.prototype.__proto__ = = =Object. prototype);//trueConsole.log ("-----Split Line-----"); Console.log ("p1.showname.__proto__="); Console.log (p1.showname.__proto__); Console.log ("p1.showname.__proto__ = = = Function.prototype:"); Console.log (p1.showname.__proto__ = = =Function. prototype);//trueConsole.log ("-----Split Line-----");
Prototype chain diagram
JS Creation object pattern and its object prototype chain study (v): Combining the constructor pattern with the prototype pattern