Js prototype object and prototype chain

Source: Internet
Author: User

Prototype Object

Each JavaScript object has a prototype object, which is implemented differently under different interpreters. For example, under Firefox,

Each object has a hidden __proto__ property, which is a reference to the prototype object.

Prototype chain

Since the prototype object itself is an object, it also has its own prototype, based on the definition above, and its own prototype object can have self-

Prototype, this is a chain, this is the prototype chain, the JAVASCRITP engine when accessing the object's properties, if the object

Not found in the body, it will go to the prototype chain to find, if found, the direct return value, if the entire chain is traversed and no property found, then the return

Back to undefined. The prototype chain is generally implemented as a list, so that it can be found in a certain order.

We first use a constructor to implement a constructor:

function A () {    This.mark = "a";    This.changemark = function () {        This.mark + = "_changed";    }} A.PROTOTYPE.MARK2 = "A2"; A.PROTOTYPE.CHANGEMARK2 = function () {    This.mark2 + = "_changed";} var a = new A (), var a2 = new A ();//The following is a description of the constructor instantiation, assigning different instance objects, unrelated console.log (A.mark);  "A" Console.log (A2.mark); "A"    A.changemark ();   Use the method Console.log (A.mark) in the instance object;  "A_changed" Console.log (A2.mark); The "a"///below illustrates a function of the new operator, which points to the current object in the prototype,//When A.CHANGEMARK2 executes, the method in CHANGMARK2 first find the value of THIS.MARK2,// But the instance object this does not have the MARK2 value, then looks up in the prototype chain, obtains the MARK2 value in the A prototype object,//At the assignment, adds the modified value in the a instance. Total: Although the prototype method is called, but the prototype property is not modified, only the new attribute is added to the instance, but when used, the most recently obtained attribute (which can be understood in the subsequent prototype chain) is used Console.log (A.MARK2);  "A2" Console.log (A2.MARK2); "A2"    a.changemark2 ();   Using the method Console.log in the prototype chain (A.MARK2);  "A2_changed" Console.log (A2.MARK2); "A2"

Why a can make the ChangeMark2 method in the prototype? This is related to JS Ingenious prototype chain, in Firefox we can print out the object and can see the object below the __proto__.

We use the above process to represent the flowchart:

 

Only the constructor will have the prototype property, and the instantiated object will have __proto__, and there will be no prototype.

As a picture, two instantiated objects are pointed to A.prototype (that is, the constructor's prototype object) through the __proto__ property.

The __proto__ of the prototype object points to object objects, like the ToString method of A.tostring (), which is present in Object prototype objects (Object.prototype).

So: When using a method or property of an object, the object is looked up in step by __proto__, and the nearest is the last method or property obtained.

———— This is the prototype chain in JS.

As you can see on the diagram, the prototype chain of all objects ultimately points to object objects, and object's prototype object (Object.prototype) is one of the few objects that do not inherit from any property, that is, Object.prototype has no __proto__, Is the pinnacle of the prototype chain.

As we can see above, when we add properties or methods to A.prototype or Object.prototype, we see the property or method in both a and A2 instances, because all two instances are connected to the prototype object of a and object through the prototype chain.

Let's look at the implementation of the prototype object and the prototype chain in terms of inheritance:

Then construct a function A and a function B, and let B inherit a, as follows:

function A (Mark) {    This.mark = mark;} A.prototype.getmark = function () {    return this.mark;} function B (Mark) {This.mark = Mark}//var temp = new A ("a"),//b.prototype = temp;//The above statement and the next statement function the same b.prototype = new A ("a"); Instantiate a, which is assigned to B.prototypevar B = new B ("B"); Console.log (B.mark); b, as shown in the previous prototype chain analysis, the nearest attribute is found up, then mark in the B instance: "B"

 

The structure of the schematic is probably as follows:

At this point we can see that there is no constructor in B.prototype, because B.prototype is simply the result of assigning a value to the new A ("a") object.

What is the role of constructor in JS? Such as:

var arr = new Array (); arr instanceof Array;      Truearr.constructor = = = Array; Truefunction temp () {}var temp = new temp (); temp instanceof temp;      Truetemp.constructor = = TEMP; True

 

The explanation for constructor in the JavaScript authoritative guide is that constructor that objects typically inherit refer to their constructors, whereas constructors are "public identities" of classes. that is, constructor can be used to determine which class the object belongs to.

 

In the small example above, instanceof can also be used to determine the class of the object, but with its own flaws, the instanceof implementation method is:

Instanceof does not check that temp is not initialized by the temp () constructor, and that the face is judged whether temp inherits from Temp.prototype, so the range is a lot wider.

As in the larger case above, use the

b instaceof B//true because B.prototype object B instaceof A//true can be found in the prototype chain of B, A.prototype objects can also be found in the prototype chain of B.

It can be said that instanceof is used to detect inheritance relationships. And when

Console.log (B.constructor)//function A ()//Because in the prototype chain of B, the most recent constructor is a.prototype with constructor pointing to the constructor a ();

But we know that B belongs to Class B, and the last thing to do is:

  

 

 

Js prototype object and 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.