Probe into the problem of even equal assignment in JS

First, the Primer

I've seen a problem with someone's blog lately.

var a = {n: 1};var b = a;a.x = a = {n:2};console.log(a.x);  //undefinedconsole.log(a);  // {n: 2} console.log(b);  // {n: 1, x: {n: 2}}

This is a typical even-equal assignment problem, is not to find that the results of printing and their own expectations are not the same, even if you can specifically explain the internal implementation mechanism?

Second, intuitive understanding

When I look at this expression, I will instinctively disassemble it as such

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

So according to this understanding, the printed result is

console.log(a.x);  //{n: 2}

Obviously the result is wrong, where is the problem? To explain the problem in principle, we must first understand the following knowledge points

Iii. knowledge points that need to be understood

• The operating mechanism of the memory
• JS engine parsing process, from left to right
• The direction of execution of the even equal assignment, from right to left

The corresponding understanding in this example is:

• A, b these variable names store just a bunch of pointers to specific objects that occupy a very small amount of space, and {N:1} These objects are real in-memory values
• When the JS engine executes to a.x = a = {N:2}, it is not a direct right-to-left execution process. Instead, the computer parses the variable names from left to right, converting them into variable values (the computer will only remember the value of the variable and the name of the variable). The assignment is then performed from right to left.

• That is, in this expression the first A and the second a point is {n:1};

  a.x = a = {n:2}

• After parsing is complete, the assignment is performed from right to left, the second equal sign is assigned a value, A is redirected to {N:2}, and the first equals sign is actually {n:1}.x={n, 2};
  And at this point, the value of {a:1, X:{n:2}} is only B.

• So the value of a.x becomes undefined because a has been redirected to {N:2}, and B points to the object after the compound.

Iv. misunderstanding and thinking in understanding

When I first looked at the related articles of equal assignment, I had no problem understanding the above principles, and the key was that when I understood the last assignment, I had an understanding

a = {n:2};a.x={n:2};// 所以此时a= {n:2, x:{n:2}}

The reason for this understanding is that there is a sequencing of the assignment of a, but in fact it does not seem to exist. The core of my understanding of the above from the analytic assignment angle is that in the process of continuous assignment, there is a total of two steps, one step is the variable name resolution, the other is the assignment, and then the corresponding relationship between the variable name and the variable depends on the value after the assignment.

V. Reference documents

• In-depth understanding of JS's even assignment extension
• 10 years of continuous assignment operations that Javascript may not be fully aware of.
• By the ES specification JavaScript (b): In-depth understanding of "even equal assignment" problem

Probe into the problem of even equal assignment in JS