Foreword – understand the JS operating mechanism in the browser, can help us to execute JS code in the brain 🤓

We are in the interview, often encounter such JS interview questions, declared several variables, after a function to execute, ask us what is the output result? If we don’t know how JS works in the browser, then this kind of interview question is basically GG ~😫

Recently see such a JS interview question, triggered my thinking: 🤓

Var x = [12, 10];function fn(y){
    y[0] = 100;
    y=[100];
    y[1]=200;
console.log(y);
}
fn(x);
console.log(x);
Copy the code

If you can give the correct answer within 10 seconds, then 🙃, excuse me ~ the exit is left on the right,…… 🙃 🙃 🙃

The body of the

If you don’t have a clear idea of what to do quickly, then read this article and don’t be afraid to do these kinds of interview questions any more

Next, I will run a process by drawing a diagram to parse JS step by step:

Before drawing, let’s look at some of the nouns we’ll be using so that we can understand them better when we combine them with graphics.

Execution environment stackECStack (Execution Context Stack)

The browser provides an environment for code execution => ECStack:

What it does:

1. Provide code execution environment (ECG global execution context)

2, store basic data type values, variables, heap reference address (VOG global variable object)

Global execution contextECG(Excution context Global)

There are many scopes in JS (global, function private, block level private). Before the code is executed, it will form its own execution context, and then it will push the context into the stack, and then execute the code in sequence in the current context.

VOGglobalvariableObject and theGOdifferent

Used to store basic data type values, variables, and heap reference addresses

Global objectGO (Global Object)

It is a Heap, which is stored in the browser by the browser’s built-in API attribute methods, pointing the window to it.

The browser will put some of the built-in property methods in a separate memory (Heap memory)

Any memory has a memory address, the memory address is hexadecimal, let’s say AAABBB000

The most commonly used function method is placed in this heap memory, as follows:

parseInt:function...

isNaN:function...
Copy the code

The browser will tell the window to point to GO, eg:parseInt(“10”) actually calls window.parseint (“10”).

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

Let’s look at an assignment. Var a=12;

How does this step work

1. Create a value

2. Create a variable

3. Associate variables with values

Basic types: Values of basic types are put directly into memory.

Reference types: create a heap and put values in the heap and addresses in the stack for variables to use.

Create a heap memory

2. Store key-value pairs in heap memory

3. Place the address of heap memory on the stack for variables to call

var b ={};

B.x finds heap memory based on the memory address and modifies the attribute x in the heap memory

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

🤔 let’s get started

Run flow 1 🤓

//1, declare a variable X

A. a heap is first created in memory to store values [12,23]

B. Create a variable X in VOG to store the memory address of the value [12,23]

C. Map variable X to memory addresses

Run process 2🤓🤓

//2, declare a function fn

A. Create a new memory space to store the functions we create, which is equivalent to storing the code in the function body as strings in the heap

B. Create a VOG variable fn and the address of function fn AAAFFF111

C. The fn variable is mapped to the memory address AAAFFF111

Note: when the function is created, the scope of the function is defined => the context in which the function is currently created. Fn’s scope is global because it was created in the global context

Run process 3🤓🤓🤓

//3. Execute function fn

A. Execute function fn, passing the value of the global variable x as an argument to the function parameter

B. Form a new private execution context

ScopeChain

After the implementation of the private context code, encountered a variable, we first see whether it is their own private variable (in their own variable object), is private, then operate private variables, if the private variable does not exist, according to the scope chain to the context to find the global context. D, initialize this to: window e, initialize argument set: arguments f, execute code in function
(fn)->

y[0]=100; // Since the parameter y refers to the address AAAFFF000 of variable x, the address AAAFFF000 is changed from 12 to 100

y=[100]; // Array [100] creates a new memory heap BBBFFF000 to hold the value 100

y[1]=200; // Store the value 200 in memory heap BBBFFFF000

console.log(y); //y refers to the memory heap BBBFFF000, so the output is [100,200]

Running Flow 4

Output variable x console.log(x); [100,23] [100,23]

AOActive objects

Note: The AO active Object is called an AO in the current context, which is used to store created variables and values. Each execution context has its own variable Object. The variable Object in the execution context of the function is called an AO(Activation Object)

conclusion

The actual JS running process in the browser is far more complicated than this. I have limited expression ability, so I will try my best to simplify the problem and make it easy to understand. I will continue to optimize when I have time later.