Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "what is the pre-compilation process of JavaScript". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Stages (three)

Lexical and grammatical analysis: lexical and grammatical analysis is to check whether the JavaScript code has some low-level syntax errors.

Precompilation: the main topic of this article

Execute code: execute code is the js engine parses the code, parses one line and executes one line

This chapter focuses on the process of pre-compilation.

Pre-compilation process

Pre-compilation is also divided into two time points:

The first one is before the JavaScript code is executed.

The second is before the function is executed.

But before the JavaScript code, the previous precompilation occurs only once, and the precompilation before the function execution is repeated.

1. Pre-compilation before JavaScript code execution

Before the JavaScript code is executed, we first create a global object, which can be understood as either a window object or a GO (Global Object) object, which we cannot see (cannot be printed).

Then put all declared global variables, variables that are not declared with var and let into the GO object, and assign the value to undefined (associated with "variable promotion")

Analyze * * function declaration: * * then put all function declarations into the GO object, and assign it to the function body of the function itself (the function name is the attribute name, the value is the function body, and if the function name is the same as the variable name, it will be mercilessly overridden)

The case shows that 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)

Combined with the above steps:

First, a GO object (window object) is created before the code in the

GO = {/ / none of the built-in attributes are written}

Put all declared global variables, variables that are not declared with var and let into the GO object, and assign the value to undefined

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

The analysis function declares that the function name is the attribute name and the value is the function body. If the function name is the same as the variable name, it will be mercilessly overwritten.

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

At this point, the pre-compilation process before the execution of the js code is completed, and the js code is executed. The first step is to assign a to 1, and the corresponding changes will be made in the GO object:

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

Then print a, which looks for the variable an on the GO object, and then the value of an at this time is 1, so console.log (a) is equal to 1. Then I print b, and I also look on the GO object and find that the value of b is undefined, so console.log (b) is equal to undefined.

Then execute the assignment statement: B = 10; 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;}}

The next line of code is a * * fun function, which will not be executed at this time, because it is actually placed at the front of the code in the previous pre-compilation process, that is, the legendary declaration is in advance, so it is ignored. Then assign a value to a2: a2 = 20 go object also changes:

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

The next step is to execute the fun function, such as the precompilation that occurs at another point in time mentioned above, that is, before the function is executed, let's talk about what the precompilation is like before the function is executed.

two。 Pre-compilation before function execution

The function call also generates its own scope (* * AO:**Activetion Object, execution time context) AO activity object. When a function is called, it is generated immediately before execution. If there are multiple function calls, multiple AO will be generated.

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

Generate AO object: generate AO active object immediately before the function is executed

Analyze and generate AO attributes: find formal parameters and variable declarations and put them into the AO object and assign them to undefined

Analyze function declaration: find the function declaration in the AO object and assign the value to the function body. The function name is the attribute name, and the value is the function body.

Line by line.

Case description

Take the code example above.

The first step is to create an AO object

AO {}

Look for formal parameters and variable declarations and put them into the AO object and assign them to undefined

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

AO {a: undefined,// parameter a has the same name as the local variable a c: undefined}

Assign an argument to a parameter

AO {a: 1, c: undefined,}

The lookup function declaration is placed in the AO object and assigned to the function body. The fun function has no function declaration, so ignore this step.

The precompilation before the execution of the function is completed, and the statement execution begins.

Execute the code

The variable b is printed first, and there is no variable b in the AO of fun, so it will be found in the GO object. The value of the GO object b is 10, so the first line of code prints out 10.

The second line of code starts with b = 2, and then the value of b in the GO object is changed to 2.

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

Then b is assigned to a, and the variable an is a local variable, so the value of an in the AO object of fun is changed to 2.

AO {a: 2, c: undefined,}

Then the next assignment statement is c = 123, so the value of c in the AO object is changed to 123

AO {a: 2, c: 123,}

At this point, the value of console.log (a) is the value of an in the AO object, and the value of console.log (b) is the value of GO object b. When the function fun is finished, the AO immediately following fun will be destroyed.

To sum up, the values printed in turn are as follows: 1 undefined, 10, 2, and 2.

This is the end of the content of "what is the pre-compilation process of JavaScript". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.