Using an example to understand the underlying processing mechanism of JS function

5 Line code , Can let wechat small program on the shelf to their own APP in | Register and send it to Dajiang 、 Huawei 、 Cherry keyboard ！>>>

Personal notes , Please correct me if there is any mistake

Take the following code as an example , Run the parsing line by line

var x = [12, 23];
function fn(y) {
    y[0] = 100;
    y = [100];
    y[1] = 200;
    console.log(y);
}
fn(x);
console.log(x);

var x = [12, 23]; Run the following

1. Open up heap memory , Create array values , Suppose the address of the heap memory is 0x000000
2. Declare variables x
3. assignment , the x Address to heap memory 0x000000

next

function fn(y) {
    y[0] = 100;
    y = [100];
    y[1] = 200;
    console.log(y);
}

Run the following

The above code is the process of creating a function . It's similar to creating a variable ：

• They all declare a variable to store the value
• Same steps ： The first step is to create a heap memory , There are functions in it , This heap has an address , Then assign the address to the variable
• Statement ： In a similar way, function names are variables , When we declare functions function fn(y){...} when , It's equivalent to declaring a variable , It's just that the value is a function . Be similar to var fn = function (y){...} Function expression for . Finally, assign a function as a value to a variable or something else

So create a function , The detailed execution order is as follows

1. Start with a heap of memory , Store the value of the function （ Suppose the address is 0x000001）
   • The value of the object is in heap memory , It stores its key value pairs
   • The value of the function is in heap memory , It's stored in its code , And it's stored in the form of strings
   • When you create a function , It's a statement of its Scope （scope）,scope The value is The context in which the function is currently created , That is, in which context , The scope is who
2. Then declare the variable fn, And point to the heap memory address （ Assuming that 0x000001）

To perform a function

fn(x); Run the following （ To perform a function ）

1. Function execution time , The value is always passed on ,fn(x) The message is x Value , namely x Point to the 0x000000 Heap memory address
2. fn(0x000000) Form a brand new Private context EC（fn）
3. In the new context of function formation , Generate a private variable object AO, Used to store variables declared in the current context （Active Object The object of activity , abbreviation AO, A variable object , Similar to global variables in the global context ）
4. What happened before the internal code was executed
   • Initialize scope chain scope-chain <EC（fn1）,EC（G）>, At both ends of the chain are < Your current private context , The scope of the function （ The context in which the function was created ）>, The right side of the chain is also called the current context ' Superior context '
   • initialization this
   • initialization argument
   • In the current context , Declare a parameter variable , And assign the value of the argument passed to it
   • Variable Promotion
5. Stack execution code
6. Release from the stack

Function stack execution code detailed steps

Let's move on to the top 5 Step by step

Put the previously created function , The code string stored in heap memory is taken out and converted into line by line execution of code .

If a variable is encountered during code execution in private context , First of all, see if it's for your own ' Private variables ', If it is ' private ' Of , Then operate your own , There is no necessary relationship with the outside world , If it's not private , Based on Scope chain , To whom Superior context Search for , See if it is private in the context of the superior , If it's not , Continue looking up ...... Always find EC（G） Global context until , We call this search process Scope chain lookup mechanism therefore

y[0] = 100
y = [100]
y[1] = 200

It's done like this ：

1. y[0] = 100,y Now the memory address stored is 0x000000, So change the value under this address ：

   

2. y = [100], New object values appear , So we need to open up new heap memory 0x000002, Create values , assignment

   

3. y[1] = 200, take 0x000002 Modify the value of the object corresponding to the address

   

4. console.log(y); This y Namely 0x000002 Corresponding value [100,200] It operates on private variables y

   

fn This completes the function .

And then execute the outside console.log(x);, At this time x In the global variable object x, The corresponding address is 0x000000, So output directly [100,23]

If fn After execution , Continue with other functions , It's going through the same process . Form a new context , Stack execution ... If there are so many functions , It's going to keep going up the stack , It's going to take up more and more memory . So in order to optimize , Browsers will default to many recycling mechanisms

Results and overall process

result

General flow chart

Other explanatory points

js Context classification

js Context （ Which area is executed ） classification

• Global context EC（G）
• Private context formed by function execution
• Block level private context

What are private variables

Private variables are variables declared by private context , contain

1. Shape parameter
2. Variables declared at the time of code execution var / let / const / function ... Note the difference from global variables , Not directly related , But there may be some indirect relationship , For example, the following code under the global variable x The value of is 0x000000, By function , take 0x000000 Passed to private variables y,y It's also 0x000000

function fn(y) {
    y[0] = 100;
    y = [100];
    y[1] = 200;
    console.log(y);
}
fn(x)