On the inheritance of JavaScript---7th (i)

Source: Internet
Author: User

The prototype chain is the default way that JavaScript implements inheritance. Here's an example to see her magic:

First, define three constructors:

functionHer () { This. Name = ' Anna ';  This. toString =function(){        return  This. Name; }}functionHis () { This. Sex = ' men ';}functionpepole (side, height) { This. Name = ' Jock ';  This. Side =side;  This. Height = ' height ';  This. Setarea =function(){        return  This. Side * This. HEIGHT/2; }}

The next step is the magic of our inheritance:

Newnew his ();

What happened to God's horse? Here we directly create the object in the Prtotype attribute of his object, and do not have to extend the original prototype of these objects. That is, we use the instance object created by her () constructor to overwrite the prototype property of his constructor. The same pepole is the same, and her constructor attribute prototype is completely rebuilt by the creation of the instance of his ().

Remember: JavaScript is a language that relies entirely on objects without the concept of classes. Therefore, we need to construct an entity new her (), and then through the attributes of the entity to complete the relevant inheritance work, but not directly inherit her () constructor, in addition, this also ensures that after the implementation of the inheritance, her () to make any modifications, deletions, additions, will not have any effect on his (), Because what we inherited is just an entity that she created.

As we said last time, when we completely replace the object's prototype (unlike adding attributes to it), there are some side effects that might be associated with the Constonctor property.

It is a good habit to reset the Constructon properties of these objects after we have done the inheritance related work.

His.prototype.constructor == people;

Let's test the current implementation:

var new pepole (5,10); My.setarea ();   //  -

Although I does not own the ToString () method, we can still invoke the ToString () method that she inherited, although it is called an inherited method, but her this still points to my object.

// Jock

Let's take a look at what happened to JavaScript when My.tostring () was tuned.

1. First she iterates through all the properties and methods of the My object, but does not find a method called ToString ().

2. Then look at the object that My._proto_ refers to, which is the entity object created by new his () during the inheritance process.

3. Obviously, the JavaScript engine will still not find the ToString () method while traversing the people () entity, and then check the _proto_ property of that entity, which in turn points to the entity object created by new her ().

4. Finally, the ToString () method is found in the entity created by new her ().

5. Finally, the method is called in my and this also points to my.

So that's the problem? What is the constructor for my object?

Because we have reset the corresponding constructor property when we build the inheritance relationship:

// true

With the instanceof operator, we can verify that the My object is an instance of the above three constructors:

My instance of her;  // truemy instance of his;  // truemy instance of people;  // true

Again, the same is true when we call the Ispropertypeof () method of the constructor prototype:

// true // true // true

We can also create objects with other constructors, and they can also get the ToString () method of her ().

On the inheritance of JavaScript---7th (i)

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.