From a simple example to understand how the JS reference type pointer works

1234567

<script>vara = {n:1};  varb = a;   a.x = a = {n:2};  console.log(a.x);// --> undefined  console.log(b.x);// --> [object Object]  </script>

The above example seems simple, but the results are not well understood, it is easy to get people to think about it-"a.x is not pointing to object a?" Why is log (a.x) undefined? "," b.x should not be the same as a.x? Why does log come out with 2 objects?

Of course, you can first understand, if you can see the reason and working mechanism naturally need not continue to look down.

The following is an analysis of the working steps of this simple code to further understand how the JS reference type "assignment" works.

First,

var a = {N:1};
var B = A;

Here a points to an object {N:1} (we call it object a) and B points to the object pointed to by a, that is, when both A and B are pointing to object A:

This step is well understood and continues to look at the very important line of code:

a.x = a = {N:2};

We know that the assignment sequence of JS is always from right to left, but because "." is the highest-priority operator, so this line of code first "calculates" the a.x.

That's when this happened. The object {N:1} that--a points to has a new attribute x (although this x is undefined):

As can be seen from the diagram, because B is the same as a point to object A, to indicate that the X attribute of a is used in addition to a.x, it is also possible to use b.x to represent it.

Next, follow the "right to left" assignment operation Order first execute A={n:2}, this time, a pointed to the object has changed, became the new object {N:2} (we call object B):

Then continue to execute the a.x=a, and many would think this is "Object B also has a new attribute x, and point to object B itself"

But in fact it is not so, because at the beginning JS has calculated the a.x, it has been resolved that the a.x is the X of object A, so in the case of the same formula back to a.x assignment, will not say to re-parse the a.x for object B x.

So A.x=a should understand that the attribute X of object A points to object B:

Then the result is obvious. When Console.log (a.x) , A is pointing to object B, but object B has no attribute x. It doesn't matter, when you look up the properties of an object, JavaScript traverses the prototype chain up until it finds a property of the given name. But when the lookup arrives at the top of the prototype chain-that is object.prototype-still does not find the specified attribute b.prototype.x, it naturally outputs undefined;

While in Console.log (b.x) , because b.x represents the X property of object A, the attribute is pointing to object B, which naturally also outputs [object Object], noting that [object object] here is not the meaning of 2 objects, object is implicitly called the ToString () method of the object, in the form: "[Object Object]". So [Object Object] represents just one of the objects:)

From a simple example to understand how the JS reference type pointer works