JS Creation object pattern and its object prototype chain study (v): Combining the constructor pattern with the prototype pattern

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.