Usually in the project, in addition to complete the writing of business logic code, we also need to clearly understand this section of JS code, how to store and execute at the bottom of the computer, do not understand the js interpretation of the execution of the beginning and end, when the real problem, only a face of confusion ~

Preparation before code execution

When we load a page through the browser, we first allocate two pieces of memory from the memory bar, ECStack and Heap.

Stack memory functions:

  1. For code to execute
  2. Holds declared variables
  3. Holds the value of the original value type

Heap memory functions:

  1. Holds object data type values

When the page is initially loaded, a space is created in the heap at the address we assume: 0x000

So what does this open up space object do? Take your time. Let’s move on

Initially, if you want to execute globally, form a global execution context, EC(G), and then push the execution

In each execution context there is a variable object that holds the variables stored in the current context

In the VO(G) global variable object, we will store a very familiar variable by default: window, which refers to the chunk of heap memory previously opened at address 0x000

That space is called the Global object GO(Global Object), and it houses built-in functions like setTimeout, setInterval, alert, and so on

With everything in place, it’s time to look at the execution through a piece of code

Underlying execution mechanism

Code first!

var x = [12.13]
function fn(y) {
  y[0] = 100
  y = [100]
  y[1] = 200
  console.log(y)
}
fn(x)
console.log(x)
Copy the code

Variables need to be promoted before executing the code. Var and function keywords should be declared or defined in advance, var keywords should be declared only, function should be declared and defined, only X and fn can be promoted in this code

Note here that x and fn are defined in the global context and stored directly in GO (only if defined in the global context).

When a function is created, the following steps are performed:

  1. It creates a space in the heap with a hexadecimal address
  2. Store some content into the space, including scopescope(in which context, scope is created) and the function body code is stored as a string
  3. Associates the heap memory address to the corresponding variable

Var x = [12, 13]

The original value is stored directly in stack memory, and the object value needs to be stored in heap memory

The function that’s defined, because it was defined in the promotion phase, so you don’t have to worry about it, and then you go down to fn of x.

Here we execute fn, follow the storage address to 0x001, execute the function body inside, and generate a new private context EC(?) when executing the function. , there is a private variable object AO(?) in the context Is used to store private variables declared in the current context

In the function, we declare a parameter y and assign the x address to the parameter

Next, execute the code inside the function

y[0] = 100

Y = [100], at which point a new heap space 0x003 is created for the private variable y

Y [1] = [200], then modify the private variable y newly assigned heap address object

Finally, print console.log(y) and console.log(x) to get the result

[ 100.200 ]
[ 100.13 ]
Copy the code

conclusion

If this article is helpful, please like it at 😯

If there are mistakes in the article, welcome to correct; If you have additional information, please leave a message.