Small talk about JS prototype chain and inheritance

Prototype (prototype) in JS but play a pivotal role, the prototype is based on the prototype chain, understanding the principle of the prototype chain, the use of the prototype will be more comfortable, but also can experience the charm of JS language.

What will be covered in this article

• Prototypes and Prototype objects
• prototype chain (JavaScript core section)
• Inheritance of Classes
• instanceof
• Constructor

We first use a constructor to implement a constructor:

functionA () { This. Mark = "A";  This. Changemark =function(){         This. Mark + = "_changed"; }}A.PROTOTYPE.MARK2= "A2"; A.PROTOTYPE.CHANGEMARK2=function(){     This. Mark2 + = "_changed";}varA =NewA ();varA2 =NewA ();//The following shows that after the constructor is instantiated, different instance objects are assigned, unrelatedConsole.log (A.mark);//"A"Console.log (A2.mark);//"A"A.changemark ();//working with methods in an instance objectConsole.log (A.mark);//"A_changed"Console.log (A2.mark);//"A"//The following describes 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,//However, the instance object this does not have a MARK2 value, then it is looked up in the prototype chain (described later) to get the MARK2 value in the a prototype object.//when the value is assigned, the modified value is added to 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 later in the prototype chain) is used.Console.log (A.MARK2);//"A2"Console.log (A2.MARK2);//"A2"A.CHANGEMARK2 ();//using methods in the prototype chainConsole.log (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 you can draw, two instantiated objects point 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:

functionA (Mark) { This. Mark =Mark;} A.prototype.getmark=function(){    return  This. Mark;functionB (Mark) { This. Mark =Mark}//var temp = new A ("a");//b.prototype = temp;//The above statement works the same as the following statementB.prototype=NewA ("a");//instantiate a, which is assigned to B.prototype
We know the prototype chain, which is to connect the prototype object of B to the prototype object of a (__proto__) through the prototype chain.
To implement inheritance
varb =NewB ("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 New  instanceof Array;      // true // true function TEMP () {} var New  instanceof TEMP;      // true // true

The explanation for constructor in reference to 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

// true because the B.prototype object can be found in the prototype chain of B  //True The A.prototype object can also be found in the prototype chain of B

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

And when

// function A () // because in the prototype chain of B, the most recent constructor is that A.prototype has constructor pointing to the constructor a ();

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

// The constructor that points constructor to itself var New  //function B ()

In this way, a complete class inheritance is complete.

Finally, we enclose a complete succession of result graphs:

For the first time, if you have any questions, please point out.

Reprint please indicate the source, thank you.

Finish.

Small talk about JS prototype chain and inheritance