What is precompilation in javascript

In JavaScript, pre-compilation is an operation performed before the code is executed. It will advance variable declarations and function declarations in advance, and put these into the created objects according to certain rules. .

The operating environment of this tutorial: Windows 10 system, JavaScript version 1.8.5, Dell G3 computer.

What is precompilation in javascript

js running trilogy

1. Syntax analysis: Before the js engine parses the js code, it will scan the entire text to find Make low-level syntax errors, such as incorrectly written braces and the like.

2. Pre-compilation. Any syntax and statements will be converted into objects, GO (Global Object), AO (Active Object). The code is placed in GO and AO according to certain rules.

3. Interpretation and execution: Compile and execute one line at a time. When there is no problem with syntax analysis and the pre-compilation stage has been completed, start interpreting and executing the code.

What kind of pre-compilation?

Pre-compilation is an operation performed before JavaScript code to advance variable declarations and function declarations. These codes are placed in the created objects according to certain rules.

Pre-compilation process:

GO window pre-compilation

1, create a GO object the moment the script tag is executed

2, look for variables Declaration, the variable name is used as the attribute name of the GO object, and the value is undefined.

3, look for the function declaration, the function name is used as the attribute name of the GO object, and the value is the function body. If the function name is the same as the variable name, directly override

AO function precompilation

1, create an AO object at the moment the function is executed

2, look for the actual parameters and formal parameters, add the formal parameters to the object as the attribute name of the AO object, and the value is the actual parameter. It is worth noting Yes, function declarations are not called variables. If there is no actual parameter value, it is undefined.

3, look for the variable declaration, the variable name is used as the attribute name of the AO object, and the value is undefined. If the variable name and formal parameter name are the same, don't worry.

4, look for the function declaration, the function name is used as the attribute name of the AO object, and the value is the function body. If the function name is the same as the variable name, overwrite it directly.

Let’s write a piece of code to briefly introduce it. The process of Yiha function precompilation

function fun(a,b){
    console.log(a);
    var a = 10;
    console.log(a);
    function a(){}
    console.log(a)
    a = 1;
    var b;
    console.log(b);
    var b = function(){}
    console.log(b);
}
fun(1,2);

1 First, an AO object will be created before executing fun.

funAO{
}

2, look for the actual parameters and formal parameters, add the formal parameters to the object as the attribute name of the AO object, and the value is the actual parameter. It is worth noting that the function declaration is not called a variable. If there is no actual parameter value, it is undefined.

funAO{
    a : 1,
    b : 2
}

3, look for the variable declaration, the variable name is used as the attribute name of the AO object, and the value is undefined. If the variable name is the same as the formal parameter name, don't worry

funAO{
    a : 1,
    b : 2
}

4. Look for the function declaration. The function name is used as the attribute name of the AO object, and the value is the function body. If the function name is the same as the variable name, overwrite it directly

funAO{
    a : function a(){},
    b : 2
}

Explanation and execution

function fun(a,b){
    console.log(a);  //往上面的AO对象里面寻找，a的值是function a(){}。 这里就输出function a(){}
    var a = 10;
    console.log(a);//上面一行代码把a赋值10 ，所以这里输出10
    function a(){}
    console.log(a)//这里也是10，因为上面函数已经提前了
    a = 1;
    var b;
    console.log(b);//往上面的AO对象里面寻找，b的值是2。 这里就输出2
    var b = function(){}//这里的函数为啥不能提前，因为这里的是一个函数表达式，这个函数没有函数名所以不能提前。
    console.log(b);//这里把b赋值function(){},所以这里输出function(){}
}
fun(1,2);

There is another possibility

function add(){
//这里的话碰到if判断，for....除了function作用域之外的咱们都得正常分析，
//所以这里的值为undefined其实就是var a提前了赋值undefined
    console.log(a);//这里的输出结果为？undefined
    if(a){
        var a = 10;
    }
    //这里是把a的值传入判断里面undefined返回的是false所以进不去，值就不会改变这里还是undefined
    console.log(a);//undefined
}
add();

This is the precompiled execution process!

Related recommendations: javascript learning tutorial

The above is the detailed content of What is precompilation in javascript. For more information, please follow other related articles on the PHP Chinese website!