preface

Today, by exploring how the following JS code is executed, to understand some uncommon but very important knowledge points in JS

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

I think it took you only 1s to figure out the answer, but let’s talk about what’s going on behind the scenes

Implementation process

1. ECStack, GO, EC, VO, AO

The browser allocates a block of memory in the computer’s memory for the stack of code to execute, called the execution environment stack (ECStack), and creates a global object (GO) that combines the built-in property methods (isNaN, setInterval, setTimeout…). Store it in a separate heap memory space and use Windows to point to global objects

Before executing code, a global execution context (EC(G)) needs to be created. After creation, the global execution context (EC(G)) needs to be executed in the stack memory. In the current global execution context, since many variables are created and assigned, a Variable Object VO(Variable Object) is created to store the variables. In the function private context, the Variable Object is called AO(Activation Object) (ps: Each execution context has a separate variable object)

To summarize these unfamiliar and uncommon nouns

  • ECStack (Execution Context Stack) : The Stack memory used specifically for code Execution
  • The Global Object GO(Global Object) : holds built-in property methods that the window points to
  • Global Execution Context EC(G) : the page is loaded, then the page is destroyed, then the page is destroyed
  • Variable Object VO (Variable Object) : Stores variables and values created in the current execution context
  • Activation Object (AO) : Variable Object in the function’s private context

2. Global code execution

When everything is ready, execute the code from top to bottom (ps: variable promotion is involved before execution, which will not be expanded here)

var x = [12.23]
Copy the code

When parsing this code, JS follows these three steps

  • Create a value[23] 12,
  • Create another variablex
  • Finally, associate variables with values

When a value is created as a reference, a new memory space is created in the heap. When the save value is created, the heap address (usually in hexadecimal format) is saved to the stack. If the value created is of a primitive type, it is stored directly in stack memory

If I go down,

function fn(y) {
   y[0] = 100;
   y = [100]
   y[1] = [200]}Copy the code

Functions also belong to the reference type and need to open up the heap memory space for storage. Different from arrays and objects, which store key-value pairs, JS will save the function body by wrapping string, and also save function-related attributes, such as function name: fn and parameter number length: 1. And, more importantly, when you create a function, you define the scope of the function, which is equal to the execution context in which the function is being created. In this example, the scope of the function fn is the global execution context, identified as [[scope]]:EC(G)

After the function is created, continue to execute

fn(x)
Copy the code

Fn (x) is equal to AAAFFF000(AAAFFF111). Before executing the function body code, we need to know:

  • Each time a function is executed, a private execution context is created for the function. After creation, the global execution context in the execution stack is pushed to the bottom of the stack.

  • At the same time, you need to create an active object AO to hold variables and values created in the context of the current function execution

After the function execution context is pushed, the following things are done

  1. Initializing the scopeChain scopeChain: the scopeChain is usually marked < current execution context, scope when the function was created >, and the scopeChain is found up the scopeChain during function execution when a variable does not exist in the active object
  2. Initialize this to: In this case, this equals window
  3. Initialize the argument collection arguments
  4. Parameter y = x = AAAFFF111
  5. The body of the executing function is followed by the body of the executing function. After the execution is completed, the execution context of the current function will be removed from the stack, and the global execution context pushed to the bottom of the stack will be pushed to the top, and the code in the global context will continue to be executed

At this point, the code is finished, and the final output x is[23] 100,.

conclusion

Above, that is all the content of this content, if there is any ambiguity, welcome everyone to leave a message exchange (Ps: GIF using Keynote production, production is not easy, everyone like more)