The process of js assignment operation

13. The process of js assignment operation

example

What is the result of this question?

var a = {
    
    n:1};
var b = a;
a.x = a = {
    
    n:2};

console.log(a.x);
console.log(b.x);

the correct answer is

undefined
{
    
    n:2}

This question examines the process of js assignment operation

Let's take a=1this assignment operation as an example. When we execute a=1this code, the processing process of the js engine is as follows

1. Find the memory address of variable a and prepare for assignment
2. Operate the expression code on the right to get the result of the expression
3. Store the result of the expression on the right in the memory pointed to by the memory address of a
4. Returns the result of the entire expression as the result of the expression on the right

The explanation for point 4 is this:

console.log(a=1) // output 1

Then let's go back to the sample question and explain the execution process of the sample code

1. Create a variable in stack memory, whose address value points to a memory area in heap memory
2. The right-hand expression returns an object{n:1}
3. Will be {n:1}stored in the heap memory pointed to by the address value of a
4. Create the b variable in the stack memory, and set the address value of b to be the same as a (at this time, a and b point to the same memory area)
5. will a.x = a = {n:2}be divided into left a.xand righta = {n:2}
6. We know that the memory value pointed to by a currently {n:1}has no xattributes, because js can manually create new attributes. So at this time, attributes will be created in the memory of a, xthat is, the value pointed to by a is{n:1,x:undefined}
7. Now dealing with the right part, we can find that the right part can also be further subdivided into left part and right part, which we record as small left part and small right part
8. Find the memory address of the small left part, that is, the memory address of a
9. Process the expression of the small right part, the result of the expression is {n:2};
10. Assign the result of the small right part to the area pointed to by the memory address of the small left part, but it should be noted that the result of the small right part is an object, then at this time a breaks the reference relationship with the memory block originally pointed to and obtains a new reference The address value, and points to {n:2}, that is, the point of a is{n:2}
11. a = {n:2}At this time , the return value of this expression can be obtained{n:2}
12. Assign it to the left memory point, at this time the left memory point is {n:1,x:{n:2}}, that is, the point of b is{n:1,x:{n:2}}

The final pointing example diagram is shown below

Summary: Getting started with js is very simple, but if you dig deeper, there are indeed a lot of details inside, and the depth of knowledge is still not enough