当前位置:网站首页>Using an example to understand the underlying processing mechanism of JS function

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

2020-11-06 20:53:42 mttwind

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)

版权声明
本文为[mttwind]所创,转载请带上原文链接,感谢