Talk about javaScript precompilation

Front:

First of all, we have to understand the js running sequence:

1. Gramma analysis
2. Precompiled
3. Explain execution

In the pre-compilation process, there will be two improvements:

1. The overall promotion of the function declaration: that is, the declaration of the function at any position is brought to the forefront of the logic
2. Variable declaration promotion: Put the variable declaration to the front.

So what are function declarations and variable declarations?
E.g:

function a(){
    
    };//这叫做函数声明
var b = function b(){
    
    };//这个不是函数声明
var a =123;//这其实是两句话，其中var a；就是变量声明，而后面a=123；叫做变量赋值

Let's look at what is meant by promotion:

function fn(a){
    
    
           console.log(a);
           var a =123;
           console.log(a);
           function a(){
    
    }
           console.log(a);
           var b = function(){
    
    }
           console.log(b);
           function d(){
    
    }
}
fn(1);

After promotion:

 function fn(a){
    
    
            var a;var b;
            function a(){
    
    }
            function d(){
    
    }
            
            console.log(a);
            var a =123;
            console.log(a); 
            console.log(a);
            var b=function(){
    
    }
            console.log(b);
            
        }

Global and local

Let's understand two more concepts below:

• Global variable
• Local variable

Global variables (GO):

• The scope is global
• Any variable, if assigned without declaration, then it is a global variable
• All variables declared when the scope is global are also global variables
• All global variables declared are properties of window

Local variable

• Declared variables written in the function body

Example:

        var a =123;
         b=123;
        console.log(window.a);    //123
        console.log(window.b);   //123

        function test(){
    
    
            var a=c=1234;
            console.log(a);      //1234
            console.log(c);      //1234
        }
        test();

Explanation: a is a declared global variable, which is window.a, so the first one is 123, and the second b is an undeclared global variable, which is window.b, so the second is 123

Next
, let's look at the execution order in the test function: the assignment order is from right to left, so we split it into:

   c=1234;
   a=c;
   var a;

And c is an undeclared variable, we directly promote it by one rank, that is, in the global variable, that is, window.c, then assign 1234 to c, and then assign c to a

Four steps of function precompilation:

1. Create an AO object Activation Object (execution context), the role is to understand the scope

2. Find the formal parameter and variable declaration, use the variable and formal parameter name as the AO attribute name, the value is undefined, which is equivalent to
   AO{ a:undefined; b:undefined; }
   
   
   

3. Unify actual parameters and formal parameters (pass actual parameters into formal parameters)

4. Find the function declaration in the function, and assign the value to the function body
   (note here, if you have it in your AO, then you don't need to go to GO)

E.g:

   function test(a,b){
    
    
            console.log(a);
            c=0;
            var c;
            a=3;
            b=2;
            console.log(b);
            function b(){
    
    }
            function d(){
    
    }
            console.log(b);
        }
        test(1);

    // 第一步,创建AO
    // 第二步,AO中有a,b,c：undefined
    // 第三步，a：1,   b，c还是undefined
    // 第四步, a: 1  b:function b(){}  c:undefined    d:function d(){}

Then start execution. When executing, the code should look like this (commented out has been precompiled):

        function test(a,b){
    
    
            console.log(a);
            c=0;
           // var c;
            a=3;
            b=2;
            console.log(b);
           // function b(){}
           // function d(){}
            console.log(b);
        }
        test(1);
        

Three steps to global precompilation:

1. Generate a GO object, Global Object (window is GO)
2. Find formal parameters and variable declarations, the value is undefined
3. Find the function declaration in the function body, and assign the value to the function body

E.g:

        console.log(a);
        var a=123;
        function a(){
    
    }

Precompilation: first declare a variable with a value of undefined, and then assign the function declaration to a. At this point, the precompilation ends and execution starts, so the console.log shows function a(){}

Then the question is again, should GO or AO be generated first?
If you want to execute the whole world, of course, there is GO first, and then AO,
but when precompiled in the function body, if AO has this variable, use AO, and use GO when AO is not.

E.g:

        console.log(test);
        function test(){
    
    
            console.log(test);
            var test=234;
            console.log(test);
            function test(){
    
    }
        }
        test(1);
        var test=123;
        console.log(test);

Start GO
first : the first and second steps
GO{ test=undefined; }the third step GO{ test= function test(){}; }

At this point, the global pre-compilation is completed and execution starts,
so the first console print is
test = function test(){};

Before executing test(1), generate
AO AO start:
AO{ test:undefined }

AO{ test= function test(){} } At this time, the internal precompilation of the function is equivalent to:

            function test(){
    
    
            console.log(test);
            test=234;
            console.log(test);
            //function test(){}
        }

Then the function starts to run, the second console prints test= function test(){}, then assigns 234 to test, and the third prints 234

Welcome everyone to like, favorite and follow! ! ! If you don’t understand, you can leave a message at any time and we will discuss with each other