Prototype inheritance in Javascript:

Source: Internet
Author: User

Prototype inheritance in Javascript:

Inheritance in js is an object-oriented knowledge. Because js does not have the concept of classes, inheritance is implemented through objects. When it comes to inheritance, prototype must be mentioned, you have to first talk about the new process.
A small column:

<script type="text/javascript">        var Person = function () { };        var p = new Person();    </script>

Let's see what new has done? We can split the new process into the following three steps:

<1> var p = {}; that is, initialize an object p.

<2> p.Proto= Person. prototype;

<3> Person. call (p); that is, Constructing p can also be called initialization p.

The key lies in the second step. Let's prove it:

alert(p.__proto__ === Person.prototype);

This code returns true. It indicates that step 2 is correct.

SoProtoWhat is it? Let's briefly describe it here. Each object will Initialize an attribute inside it, that isProtoWhen we access the attribute of an object, if this attribute does not exist inside the object, it will goProtoFind this attribute, thisProtoThere will be your ownProtoSo we can keep looking for the concept of prototype chain.

According to standards,ProtoIs not made public, that is,Private attributesHowever, the Firefox engine exposes it to a common attribute, which can be accessed and configured externally.

<script type="text/javascript"> var Person = function () { };        Person.prototype.Say = function () {        alert("Person say");    }    var p = new Person();    p.Say();    </script>

This code is very simple. I believe everyone has written it like this. Let's see why p can access the Person's Say.

First var p = new Person (); p.Proto= Person. prototype. So when we call p. Say (), first p does not have the Say attribute, so he needsProtoAnd we defined the Person. prototype. Say = function () {}; so we found this method.

Next, let's take a look at the challenges,

Function tiger () {this. bark = function () {alert ("I will bite") ;};/// define a tiger method function cat () {this. climb = function () {alert ("I will climb the tree") ;};/// define a cat method // how can the tiger learn to climb the tree through inheritance? Start inheritance. Tiger. prototype = new cat (); var hnhu = new tiger (); hnhu. climb (); hnhu. valueof (); // Is it amazing? The Tiger will be afraid of it, too.

Based on the above concepts, I will analyze the specific inheritance process. First, I will create a new tiger object with hnhu.Proto= Tiger. prototype, because tiger. prototype = new cat ();
So tiger. prototype.Proto= Cat. prototype. At this point, the inheritance has been paid, and the conversion is as follows:

Hnhu.Proto= Tiger. prototype
Hnhu.Proto.Proto= Cat. prototype

Okay. Now let's take a look at the above result, hnhu. climb (). Because hnhu does not have the climb attribute, the hnhu is removed.Proto, Which is found in tiger. prototype. Since tiger. prototype does not have climb, go to hnhu.Proto.Proto, That is, find the method in cat. prototype, and then find alert ("I will climb the tree.

The same applies to valueof. This chain forms a prototype chain, and inheritance is achieved through the prototype chain.

The above code is illustrated:

The prototype and prototype chain are similar to the scope and scope chain. You need to taste the essence of the chain.

After learning how to use it, a penguin inherited interview questions probably meant that a dog would scream at the beginning, and then some variation occurred, and the call turned into a variation.

Function dog () {this. fark = function () {alert ("") ;};}; function peter () {this. money = function () {alert ("I am a rich dog") ;}}; peter. prototype = new dog (); peter. prototype. bark = function () {alert ("variant") ;}; var tz = new peter (); tz. bark (); tz. fark ();

You can also. some new attributes are added to prototype. After adding the attribute, whether it is a mutator or not, the method above inherits its attributes because the Object is in the penultimate layer of the prototype chain.

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.