Completely master the JavaScript precompilation process

This article brings you relevant knowledge about precompilation in javascript. It mainly introduces related issues of precompilation through examples. I hope it will be helpful to everyone.

Stages (three)

1. Lexical and syntactic analysis: Lexical and syntactic analysis is to check whether the JavaScript code has some low-level syntax errors
2. Pre-compilation: This article focuses on
3. Execution code: The execution code is the js engine parsing the code, parsing one line and executing one line

This chapter mainly talks aboutPre-compilation Process

Pre-compilation process

Pre-compilation is also divided into 2 points in time:

1. The first one is before the JavaScript code is executed
2. The second one is before the function is executed.

But before the JavaScript code, the previous pre-compilation only occurs once, and the pre-compilation before function execution is multiple times.

1. Pre-compilation before JavaScript code execution

1. Before JavaScript code is executed, a global object will first be created, which can be understood as a window object , can also be understood as a GO (Global Object) object, which we cannot see (cannot print)
2. and then all declared global variables , Variables that are not declared using var and let are placed in the GO object, and the assigned value is undefined (reminiscent of " Variable promotion")
3. Analysis **Function declaration:** Then put all function declarations into the GO object, and assign the value to the function body of the function itself (The function name is the attribute name, The value is the function body. If the function name and variable name are the same, they will be overwritten mercilessly)

Case description

<script>
    var a = 1;
    console.log(a);
    console.log(b);
    var b = 10;
    function fun (a) {
        console.log(b);
        var a = b = 2;
        var c = 123;
        console.log(a);
        console.log(b);
    }
    var a2 = 20
    fun(1);
 
</script>

Combined with the steps mentioned above:

1. First, <script></script> will create a GO object (window object) before executing the code

   GO = {
   	//自带的属性都不写
   }

2. will All declared global variables and variables not declared using var and let are placed in the GO object and assigned a value of undefined

   GO = {
   	a : undefined,
   	b : undefined,
   	a2 : undefined
   }

3. AnalysisFunction declaration, the function name is the attribute name, and the value is the function body. If the function name and variable name are the same, they will be overwritten mercilessly

   GO = {
   	a : undefined,
   	b : undefined,
   	a2 : undefined,
   	function fun (a) {
       var a = b = 2;
       var c = 123;
     }
   }

4. This At this time, the pre-compilation process before the js code execution is completed, and the js code starts to be executed. First, a is assigned a value of 1, and corresponding changes will also be made in the GO object:

   GO = {
   	a : 1,
   	b : undefined,
   	a2 : undefined,
   	function fun (a) {
       var a = b = 2;
       var c = 123;
     }
   }

5. Then print a. At this time, the variable a will be found on the GO object, and the value of a at this time is 1, so console.log(a) is equal to 1. Then print b, and also search on the GO object, and find that the value of b is undefined, so console.log(b) is equal to undefined.

6. Then execute the assignment statement: b = 10; At this time, the value of b in the GO object becomes 10

   GO = {
   	a : 1,
   	b : 10,
   	a2 : undefined,
   	function fun (a) {
   		var a = b = 2;
   		var c = 123;
   	}
   }

7. The next line of code is a **fun function, which will not be executed at this time, because in the previous pre-compilation process, actually It was placed at the front end of the code, that is, the legendary declaration was in advance, so it was ignored. Then perform the assignment operation to a2: a2 = 20, and the GO object also changes:

   GO = {
   	a : 1,
   	b : 10,
   	a2 : 20,
   	function fun (a) {
   		var a = b = 2;
   		var c = 123;
   	}
   }

8. Then execute funFunction, such as the precompilation that occurs at another point in time mentioned above, is before the function is executed. Now let’s talk about the precompilation before the function is executed.

2. Pre-compilation before function execution

1. Function calls will also generate their own scope (**AO: **Activetion Object, execution context)AOactive object. When a function is called, it is generated a moment before execution. If there are multiple function calls, multiple AOs will be generated

   1. Generate AO objects: The moment before the function is executed, the AO active object
   2. analyzes and generates the AO attributes: Find the formal parameters and variable declaration and put them into the AO object , the assigned value is undefined
   3. Analyze function declaration: Find the function declaration and put it into the AO object and assign it to the function body. The function name is the attribute name, and the value is the function body;

   If an attribute with the same name on the AO object is encountered, it will be overwritten mercilessly

2. Execute line by line.

Case description

The code example I took is the one above.

1. The first step is to create an AO object

   AO{
   
   }

2. Findformal parametersandvariable declarationPut it into the AO object and assign it to undefined;

   Note: b in the fun function is not declared by var, so it is a global variable , will not be placed on the AO of fun.

   AO{
   	a: undefined,//形参a与局部变量a同名
   	c: undefined
   }

3. Assign the actual parameter to the formal parameter

   AO{
   	a: 1,
   	c: undefined,
   }

4. Search The function declaration is placed in the AO object and assigned as the function body. The fun function has no function declaration, so this step is ignored.

5. 函数执行之前的预编译完成，开始执行语句

6. 执行代码

   1. 首先执行打印变量b，而此时fun的AO里边并没有变量b，所以会去GO对象里边找，此时的GO对象b的值为10，所以第一行代码打印出10；

   2. 第二行代码首先要看的是b = 2，然后GO对象里边b的值就被改为2了。

      GO = {
      	a : 1,
      	b : 10,
      	a2 : 20,
      	function fun (a) {
      		var a = b = 2;
      		var c = 123;
      	}
      }

   3. 然后b再赋值给a，变量a是属于局部变量a，所以fun的AO对象里边a的值被改为2。

      AO{
      	a: 2,
      	c: undefined,
      }

   4. 接着下一个赋值语句是c = 123，所以AO对象中c的值被改为了123

      AO{
      	a: 2,
      	c: 123,
      }

   5. 此时再执行console.log(a)的值就是AO对象里边a的值 2；执行console.log(b)的值就是GO对象b的值 2，至此函数fun执行完毕，紧跟着fun的AO也会被销毁。

7. 综上所述，依次打印出来的值为：1，undefined，10，2，2。

总结

预编译两个小规则：

1. 函数声明整体提升(无论函数调用和声明的位置是前是后，系统总会把函数声明移到调用前面）
2. 变量声明提升(无论变量调用和声明的位置是前是后，系统总会把声明移到调用前，注意仅仅只是声明，所以值是undefined）

预编译前奏

1. imply global(暗示全局变量-专业术语) 即：任何变量，如果未经声明就赋值，则此变量就位全局变量所有。(全局域就是window，这里再一次说明了JavaScript是基于对象的语言，base on window)
2. 一切声明的全局变量，全是window的属性；var a=12;等同于window.a = 12;(会造成window这个对象特别臃肿)
3. 函数预编译发生在函数执行前一刻(懒加载机制)

相关推荐：javascript学习教程、web前端开发视频教程

The above is the detailed content of Completely master the JavaScript precompilation process. For more information, please follow other related articles on the PHP Chinese website!