Summary of basic JavaScript knowledge (8) Pre-compilation execution process

This time I will bring you a basic knowledge summary of JavaScript. There are a total of eleven knowledge points. Basic JavaScript knowledge summary (8) Pre-compilation execution process. The following is a practical case. Let’s take a look. .

JS running trilogy

The first step: syntax analysis

The second part: pre-compilation

The third part: interpretation and execution

Precompilation

Syntax analysis is also called semantic analysis. Syntax analysis is a process that is executed throughout the article. For example, I wrote many lines of code. When these codes are executed, they are interpreted and executed line by line. But before executing the first step of the system execution, it will scan it to see if there are any low-level grammatical errors, such as missing brackets, adding Chinese characters, etc. It will scan the entire text. But it is not executed. This whole-text scanning process is called syntax analysis. After the whole-text scanning, it will be pre-compiled, and then executed one line at a time, which is to explain and execute

Precompilation prelude

imply global 暗示全局变量: 即任何变量,如果变量未经声明就赋值,自变量就位全局对象所有
eg : a = 123;
eg : var a = b = 123;

All declared global variables are all attributes of window

  eg:var a = 123;===> window.a = 123;
//例子:
   function test (){        console.log("a");
   }  
   test();//成功打印出a,
   box();//写在方法之前也成功打印出a,为什么能执行就是有预编译的过程
   function box (){        console.log("a");
   }    
   var a =123;    console.log(a);//输出123
   console.log(a);//输出undefined,不报错;
    var a = 123;    
    //但是如果直接打印会报错;
    console.log(b)//报错
    //也是预编译的效果
    
    //如果想偷懒记住两句话
    //函数声明整体提升
    //变量 声明提升

Explain the improvement of the function declaration: If you write a function declaration, no matter where you write it, the system will always It is mentioned at the front of the logic, so no matter where you call it, whether it is called from above or below, in essence, it is called from the bottom of the function, and it will always promote the function declaration to the front of the logic.

Variable declaration improvement, for example

var a = 123;//actually it is two parts var a;//declare the variable first
a = 123;//assign the variable

So the variables promoted by the system are not promoted together with the value, so in the example a prints out undefined;

Note that these two sentences are not omnipotent

For example

function a(a){    var a = 123;    var a = function(){        
    }
    a();
}var a = 123;

This cannot be solved by those two sentences

Before explaining the above, we must first understand what impiy global is

imply globa: hint Global variable: that is, any variable. If the variable is assigned a value without being declared, the independent variable will be in the global object.

eg : a = 123;

eg : var a = b = 123;

a = 10;console.log(a);//Print 10 and then have awindow.a//10var b = 20;//You declared window and bwindow is the global domain

Pre-compiled official

Create AO object

Find the formal parameters and variable declarations, use the variable and formal parameter names as the AO attribute names, and the value is undefined

Unify the actual parameter values ​​and formal parameters

Find the function declaration in the function body, and assign the value to the function body

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

In this example, the parameters, variables, and function names are all called a. First of all What is certain is that an overwriting phenomenon will definitely occur, which is very contradictory. As mentioned earlier, the pre-compilation of the function is executed just before the function is executed. It can be said that pre-compilation reconciles these contradictions.

First precompile

The first step: Create an AO object, the full name is Activation object, which is the scope, also called the execution context

AO{    
}

The second step: Find the shape Parameter and variable declaration, use variable and formal parameter names as AO attribute names, and the value is undefined

AO{    a : undefined
    b : undefined
}

Step 3: Unify actual parameter values ​​and formal parameters

AO{    a : 1;    b : undefined
}

Step 4: In Find the function declaration in the function body, and assign the value to the function body

AO{    a : 1,    b : undefined,    //b是是函数表达式,不是函数声明,所以不变
    //然后有a了 有b了,然后将这个函数声明的名作为AO对象挂起来
    d : 
}//然后值赋予函数体,也就是把a和b的属性值,变成函数体//覆盖掉a 和b的的属性值//也就变成下面的//因为第四步的优先级最高AO{    a : function a () {}
    b : undefined,    //b是是函数表达式,不是函数声明,所以不变
    d : function d () {}
}

At this point, the pre-compilation process is over, the code execution begins, and the function is executed

Then we are looking at the above example

//预编译结果AO{    a : function a () {}
    b : undefined,    d : function d () {}
}//开始执行代码function fn (a){    //第一步开始打印a
    //根据上面预编译的结果,
    //所以打印结果是function a () {}
    console.log(a);    
    //第二步执行 var a = 123;
    //因为在预编译的第二步里面,变量已经提升了
    //所以第二步只执行的赋值
    //a = 123;去AO对象里面去找a
    //也就变成
    //AO{
        //a : 123   这个才是a的存储值
        //b : undefined,
        //d : function d () {}
    //}
    var a = 123;    //所以打印出123
    console.log(a);    //因为这句在话在预编译的时候系统已经看了
    //所以不在看这句话
    function a (){};    //所以下面的console.log(a)
    //还是打印123;
    console.log(a);    //一样下面的var b这句话在预编译的时候已经看了,所以不在看
    //AO{
        //a : 123   
        //所以b的值变成function(){}
        //b : function(){}
        //d : function d () {}
    //}
    var b = function (){
        
    }    //所以打印出function(){}
    console.log(b);
        
}

fn(1);

We are looking at an example

function test(a , b){    console.log(a);
    c = 0;    var c;
    a = 3;
    b = 2;    console.log(b);    function b () {}    console.log(b);
}//这下我们就很快的得出打印的东西//a-->1//b-->2//b-->2

Pre-compilation will not only occur in the function body, but also in the global world

Globally The first step is to generate the GO Global Object first, and the others are the same

GO === window

Then the question is whether GO comes first or AO comes first

The answer is to execute GO first

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

Summary of basic JavaScript knowledge (6) Functions, initial scope (Part 1)

Basics Summary of JavaScript knowledge (6) Function, initial scope (Part 2)

Summary of basic JavaScript knowledge (7) Recursion

The above is the detailed content of Summary of basic JavaScript knowledge (8) Pre-compilation execution process. For more information, please follow other related articles on the PHP Chinese website!