javascript cultivation base (1) - a prototype chain face questions ambush

In front of the foundation, all skills are the clouds.

This topic is

Asked to write console output

Subject knowledge involved

1, this point
2, the prototype prototype chain
3, class inheritance
4, primitive types and reference types are distinguished
5, each knowledge point can separate out to do special studies.

Problem-solving knowledge required details

1. constructor has a prototypeproperty, point prototype object constructor will share the same instance of a prototype object;
2. instance generation will generate a new in-memory heap memory, for example of the general operation will not affect other instances, because occupy different spatial memory in the heap, independently of each other;
3. Each instance has an implicit prototype __proto__point prototype object constructor;
4. The thispointing problem is often the case comprising the following categories:
4.1 as an object method, who call points to who (in this problem mainly related to this article)
4.2 as a function call, pointing to a global variable topwindow
4.3 as a constructor call, i.e. newthe operator generating instance, this refers to the constructor Examples
4.4 calland applymethod, the display specified thisin the binding for the specified context
5. literal manner ( there will be literal information translated into direct amount , personally think the latter translation is actually more intuitive image ) when assigning objects and arrays (array of nature are objects), is a reference that is generated in the heap resources generated in the stack memory variables, then variable points to address resource.
6. Find the prototype chain rule to follow the shortest path principle, i.e. to find the instance attribute, then down to find the prototype chain properties specified until the prototype chain Object.prototypeand null, if the instance attribute itself and the entire prototype chain looking for does not exist returnsundefined
7. assignments and references to the original value assignment details when the difference between the type of assignment.

Start a sectional title

1.parent.show()

Basically no interpretable.
The value will be able to direct the answer 1 [1,2,1] 5;

2.child1.show()

ChildThe constructor was originally directed Childthe

Title explicitly Childprototype object class pointing to Parentan instance of the class, which is javascript common object-oriented programming inheritance one. It should be noted here Child.prototypepoints to Parentan instance parent（严谨地说，此处指向的是Parent的匿名实例，因为parent只是一个标识符而不是实例本身，它指向这个匿名实例）, rather than to Parentthe class

In the console output operations directly answer available11 [1,2,1] 5

此处令人迷惑的是this.b指向的数组最后一列为什么是1而不是11?

先来看一下child1的样子：

When executed child1.show()when this method, since child1as Childan example, is to have a this property, so the show()method this.awill directly to the value of this attribute, i.e. 11, will not continue to take along the prototype chain __proto__on an object referred to a property ;

Find Next this.b, since child1there is no b of this property, it will be taken along the prototype chain to parentthe b property whose value is an array, the former two are constants nothing to say, the last one is a reference to the array, and where a dynamic pointer is not pointing, as in new Parent()this step, when it has been executed once, the point is determined parent.aresource pointed to , that is, child1.__proto__in a property of that resource, i.e. the value 1.

Extend thinking

have to be aware of is:

1. From the code point of view, child1.__proto__.bthe array is the third point child1.__proto__.a, that at this time we modify child1.__proto__.athe value, will affect the child1.show()results of it:

The answer is wood influential, why it seems like attribute points to the same address but not the same as the value of situation occurs? Because the parentinstance generation time, this.apoints to a primitive value 2 , so that this.bthe third entry is assigned an actually original value, so the first glance here like reference type of assignment, but in reality is not. The original value of the assignment will open up new storage space, making this.aand this.b[2]the values are equal, but points to the heap memory of a different address. More detailed explanation can be found in [extended reading] recommended Bowen .

2. How to make that child1.__proto__.bthe third term is also output array of 11it?
- modify instantiated
because the Parentclass definition, b third property is a pointer to an array of a property's value, meaning in Parentthis quote before instantiation is dynamic point , so long as the Parentchange in the class definition of the instance prior this.avalue, the desired effect can be achieved, if Parentinstantiated, the only explicitly modify the *.b[2]value of this attribute.
- get / set method of synchronizing
Another way is by providing a property setting get/setmethod, each time is a time value of a property changes, synchronous modification b[2]values, codes, and operation results are as follows:

3.child2.show()

If you understand the above explanation, then you can come here for the same reason the answer:12 [1,2,1] 5

Then the code is executed: child1.change (); child2.change ();

4.parent.show()

parentIs an Parentinstance of a class, Child.prorotypepoints to Parentanother instance of the class, both of which are two resources in the heap memory, independently of each other, it does not affect the operation of the above-described parentexample,
the output remains the same: 1 [1,2,1] 5;

5.child1.show(),child2.show()

child1Implementation of change()the method, what changes have happened then?

this.b.push (this.a)
due to the dynamic characteristics of this point (dynamic directivity and this irrespective herein, this point has been determined as an example, here is determined by the mechanism look for this attribute in the object.) , this.b points to Child.prototypethe b array, this.a will point child1to a property, it Child.prototype.bbecomes [1,2,1,11] ;

this.a = this.b.length
this statement this.aand this.bpoint to a consistent with, so the result is child1.achanged to 4 ;

this.c.demo = this.a ++
because child1their properties do not c this property, so herein this.cwill point Child.prototype.c, this.aa value of 4 , the original type, while it is directly assigned assignment, Child.prototype.c.demothe result is 4 , and this.athen increment of 5 (4 + 1 = 5) .

Then, child2the implementation of the change()method, while child2and child1are Childinstances of classes, so their prototype chain point to the same prototype object Child.prototype, that is, the same parentinstance, so child2.change()that all affected can affect the prototype object statement child1of final output

this.b.push (this.a)
due to the dynamic characteristics of this point (here explained supra), this.b points to Child.prototypethe b array, this.a will point child2to a property, it Child.prototype.bbecomes [1,2 ,, 11, 12] ;

this.a = this.b.length
this statement this.aand this.bpoint to a consistent with, so the result is child2.achanged to 5 ;

this.c.demo = this.a ++
because child2their properties do not c this property, so herein this.cwill point Child.prototype.c, the result is performed so that Child.prototype.c.demothe value becomes the child2.avalue 5 , the child2.afinal increment of 6 (5 + 1 = 6) .

Next, execute the command output, the output of the final results:
child1.show ():. 5 [1,2,1,11,12]. 5
child2.show ():. 6 [1,2,1,11,12]. 5

Extend thinking
himself in the problem-solving in the this.c.demo = this.a++wrong, I thought this would be passed by reference, but the actual value is passed, after analysis to understand because the this.apoint is a primitive value, so here is equivalent to the original values assigned to the object properties , so the assignment the child.c.demovalue will not again suffer child.athe impact of changes. If child.aa reference type, the result is what will become of it?
We made some changes to the source, will child.apoint to an object (that is, reference types):

Then after the run will find that Child.prototype.cthe value will decrease child1.aand change of change, because the child1.avalue is a reference type, the assignment will make the process Child.prototype.cand child1.apoints to the same memory address space of a resource. For primitive types and reference types more detailed explanation, refer to the end of the extended reading articles in the blog.

Harvesting and reflection

1. The basics always been fragmented details, must be in line with Sike in the end learning attitude.

2. Basic knowledge is the most boring, but also widen the gap between the real thing and the people, but also you want to enter manufacturers have to cross the threshold, the important but not urgent . Also a rookie, and some people 3 - has become a front-end architect five years later, some people 3--5 years after the still emerging with a new framework of events tied to the button, want to be the kind of person, what kind of effort will have to pay , most of the time without the problems. The foundation is very important! Very important! Very important!

3. Based on this thing is to keep watch, like 红宝书(javascript高级程序设计), and 犀牛书(javascript权威指南)this book, the best more than a few times, some of the incomprehensible phenomenon, often due to the underlying principles of understanding is not in place due to, buy new books direct to elevate you do not feel bad monitor? Himalaya has to accompany you to a free reading series, more than 30 audio throughout the period explain on the Little Red Book content, do not like reading children's shoes is definitely a godsend.

javascript cultivation base (1) - a prototype chain face questions ambush

Guess you like