Shulou(Shulou.com)05/31 Report--

Today, I would like to share with you the relevant knowledge of how pre-compilation is carried out in JavaScript. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

Introduce

Before the code is executed, the compiler does the following:

One parse stage

Participle. Is to divide the code into atomic symbols (token)

Translate token parsing into AST (syntax spanning tree).

Second analyze stage

If you encounter a declaration statement, you will pass the declaration to the scope to create a binding, allocate memory, and set the variable to undefined or function body by default.

Then you can execute the code, and every time you encounter an assignment or a value in the middle of execution, you will look for the binding in the scope. If you look at it this way, isn't it a bit "pre-compiled"? But in fact, it is more appropriate to call it preprocessing. Next, let's take a look at a wave of operations that look most like precompilation-- the practical information of step 3.

"precompilation"

My teacher told me this joke before telling me about it:

I hung up because of such a question during the interview.

Var a = 100function foo () {console.log (a)} foo ()

Q: why is the value of output a 100?

A: because 100 is assigned to a.

After the teacher said, I was so dizzy that I didn't understand the funny point at all. It was only later that I realized that I was examining the knowledge of "precompilation".

Generally speaking, "precompilation" can be divided into

The creation of a GO object (global object) occurs when the page is loaded

The creation of an AO object (activation object) occurs immediately before the function is executed

The specific steps are as follows:

Global precompilation

1. Create a GO object

two。 Find the variable declaration, declare the variable as the property name of the GO object, and assign the value undefined

3. Find the function declaration in the global, use the function name as the property name of the GO object, and assign the value to the function body.

Local precompilation

1. Create an AO object

two。 Find formal parameters and variable declarations, and declare them as property names of the AO object, with a value of undefined

3. Unify the actual parameter and the formal parameter

4. Find the function declaration in the function body, use the function name as the property name of the AO object, and assign the value to the function body.

So we should answer the interview question in that joke like this:

First, the compiler creates a GO object

Find the variable declaration var a

And function declaration function foo () {}

Assign the above two variable declarations as the initial values of the attribute names of GO

GO {

A:undefined

Foo:function () {}

}

Then run the first line of code axi100

Assign 100 to an in GO

Then execute the fifth line of code to run the foo function

Create an AO object

Look for variable declarations and parameters in the function body, (none)

Then find the function declaration in the function body (none)

So

AO {

}

When you are finished, run the third line of code and output a

First look for the value of an in the AO object, find that it does not exist, expand to the external scope, look for an in the GO object, and find that the value of an is 100.

Output 100

Of course, the question in the joke is too simple, but it can give us a clear understanding of this "pre-compilation".

Next, let's take a look at a simplified version of the interview question to practice our hands:

Global = 100function fn () {console.log (global); global = 200console.log (global); var global = 300} fn ()

What is its logic and output? Through the step-by-step analysis, we can know that the specific analysis should be like this:

GO: {global: undefined = > 100, fn: function () {}} global = 100 / / variables that are not declared defaults to global variables and will also be put in GO function fn () {console.log (global); / / output undefined global = 200 console.log (global) / / output 200 var global = 300} AO: {global: undefined = > 200 = > 300} fn () above is all the content of this article "how to precompile in JavaScript". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.