JavaScript Object-Oriented programming (4) Rewriting the confusion caused by prototype

Source: Internet
Author: User
Tags prototype definition

Let's look at two phenomena first:

1. Component Form declaration prototype (partial override), the prototype constructor is a host function instead of an object, just like adding properties directly to the host constructor

function Dog () {this.tail = true;} New two dogs, note that at this time there is no definition prototypevar benji = new Dog (), var rusty = new Dog ();D Og.prototype.say = function () {return ' woof! ';} 1. Partially rewritten, the prototype constructor is a host function instead of an object, just as alert ("partial override, its constructor:") is added directly to the host constructor. Benji.constructor.prototype.constructor)///formally because of this feature, objects created before the prototype definition still automatically get the prototype property alert ("Benji.say () = = = "+benji.say ());//Normal, available

2. The second phenomenon is that if prototype is defined directly as a simple object, this action is called a full rewrite
At this point the prototype constructor is object, and the host constructor does not directly have the properties of the prototype

Also formally because of this, you have created a good object before prototype declaration, and you cannot use the prototype property

--full rewrite to cut off the original instance and prototype

In full rewrite form dog.prototype = {Paws:4,hair:true};alert ("full override, its constructor = = =" +benji.constructor.prototype.constructor);/* Objects that have been created before the prototype declaration, cannot use prototype properties, completely rewrite the original instance and prototype off the */alert ("benji.say () = = =" +benji.say ());//Normal alert ("Access the properties of the prototype object using the previous object::" +benji.paws);//undefined

So, first of all, you have to remember that partial overrides are like adding properties directly to the host constructor, while a full rewrite is not. This raises the difference between the old object access and the ability to access the new property.

3. Fully rewritten after the newly created object has only the original properties and the properties defined in the full override
The original property and the previous partial override property are available on the object that was created before the full override

In full rewrite form dog.prototype = {P1:888,p2:999};var Lucy = new Dog ();//New Object for (I-Lucy) {alert (i);//tail P1 p2}for (i in Benji {alert (i);//tail say}

4. The above content is still relatively good understanding, Partially overridden property (or method), after overriding the old and new objects can be used, the fully overridden property (or method) only new objects can be used, and a full rewrite will also mask the previous prototype properties;

There is also a problem that will cause confusion, which is a completely rewritten constructor pointer error:

Dog.prototype = {P1:888,p2:999};var Lucy = new Dog ();//New Object/*4. Full rewrite constructor pointer error */alert (lucy.constructor);//object?

How to fix it? Simply reset the constructor point to the next prototype:

Dog.prototype = {p1:888,p2:999};D og.prototype.constructor = dog; var lucy = new Dog ();//New Object/* Reset constructor pointer, normal */alert (Lucy. constructor);

This part of the content is mainly for "inheritance" to prepare, we know that inheritance, encapsulation, polymorphism is object-oriented features, so have to understand the inheritance in JS.

See tell for details.





JavaScript Object-Oriented programming (4) Rewriting the confusion caused by prototype

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.