The dynamic nature of JS prototype and the relationship between examples and prototypes

Source: Internet
Author: User

Today again read the "JS elevation" The sixth chapter, have some deep understanding and comprehension, summarize share.

There are many ways to create objects, there is a dynamic prototype pattern , the most practical is the combination of constructors and prototypes , the dynamic nature of the prototype in both of these models are reflected, my own understanding is: The former "dynamic" is through some judgments, See if the method exists to decide whether to initialize the prototype, and the modification of the prototype within the constructor is immediately reflected in all instances, and the latter's "dynamic" is primarily to say that the modifications to the prototype object are immediately in the instance, whether the first instance is created or the prototype is modified first. For the latter comes a chestnut (chestnut 1):

function Person () {} var New  function() {    alert ("hello!") );} P.sayhello ();     // popup: Hello      

In fact, the association between the instance and the prototype is a directional pointer, so I feel that the constructor and the instance are somehow equal, except that the constructor has a pointer (constructor) that the prototype refers to.

Here, everything is well understood, but the article next has expanded a little content confused me, directly on the code (Chestnut 2):

function= {
Constructor:person, " Tom ", function() { alert (this. name); }} var New Person ();p. Sayname (); // pop up: "Tom"

Well, since the top says, the prototype is dynamic, that's what I wrote (Chestnut 3):

function Person () {} var New = {
Constructor:person, " Tom ", function() { alert (this. Name) ; }} P.sayname (); // Error

Supposedly, my instance called the prototype method, should pop up "Tom" ah, in fact, the error: "Undefined is not a function."

In fact, this is no longer the problem of the dynamic dynamics of the prototype, but the case with the new, old prototype object between the problem. In addition to the relationship between the prototype and the instance, we can use isprototypeof or instanceof to judge.

As we all see, chestnuts 1 and chestnuts 2, 3 modifications to the prototype are not the same, chestnut 1 is equivalent to a purely prototype of the object added a method, and chestnuts 2, 3 using the literal method to create a new prototype (equivalent to a new object), completely, thoroughly covered by the end The original prototype object, but with a sentence "Constructor:person;" In disguise, a careful reader may find me in the second paragraph of the description is to "modify" the word bold, chestnut 1 is only "modified", Chestnut 2, 3 is "new cover."

Chestnut 2 When you create an instance object, the original prototype has been overwritten with the new prototype and is therefore able to access this method. and Chestnut 3, when the instance is created, its pointer to the previous prototype, even if later a new prototype object, the pointer is still unchanged, once in the original prototype is not access to this method, so error. The description of the language looks very dry, and we'll have another chestnut (chestnut 4):

functionPerson () {}person.prototype={name:"Tom", Age:29, SayHello:function() {alert ("Hello"); }}    varProto =Person.prototype;varp =NewPerson ();p. Syahello (); //HelloAlert (Person.prototype.isPrototypeOf (proto));//falseAlert (Person.prototype.isPrototypeOf (p));//trueAlert (Proto.isprototypeof (p));//true

The above code tells us very clearly that Proto is always the original prototype object, while the Person.prototype in alert is a new prototype object that has been overwritten, and P accesses the new prototype object at this point.

Finally, a chestnut (chestnut 5):

functionPerson () {}person.prototype= {    varProto =Person.prototype; varp =NewPerson (); Name:"Tom", Age:29, SayHello:function() {alert ("Hello");     }} P.syahello (); //ErrorAlert (Person.prototype.isPrototypeOf (proto));//falseAlert (Person.prototype.isPrototypeOf (p));//falseAlert (Proto.isprototypeof (p));//true

The above code is very clear to tell us: the Proto is still the original prototype object, p this time to access the original prototype object.

In summary, the personal feeling that these two parts of the content should not be put together to say, it is easy to confuse, second, look at the problem, must be able to go, jump out, meet the corner, standing in a higher angle to see, there will be a new discovery, oneself in see this piece of childhood has been turned to corner, clear Front said there is dynamic, behind does not reflect, and also contrary, this is clearly unreasonable, later discovered, this is actually two different son, should separate to understand.

(another: This is JS in the more important module, I learned sparse, unavoidable omission, welcome correction, common progress ^_^)

The dynamic nature of JS prototype and the relationship between examples and prototypes

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.