Precompilation is a feature of JS, and one of the most difficult things to do before closures. Precompilation has four formulas, and these four formulas can be understood as long as you memorize them. These four formulas are at the bottom of this article. This section is long and there is a lot to understand. Declare and execute (assignment) are two separate steps. Declare is part of precompilation.




To understand precompilation, you need to understand variable declarations. Variable declarations are divided into global and local. Local variables are related to scope, which we’ll talk about later.

There are two things to remember about global variable declarations

1. Any variable that is assigned an undeclared value is owned by the global variable.

All declared global variables are properties of window.


Wechat subscription number: Rabbit_svip



In the Console window, where you can see the output, you have the variable A.



If you print window.a, you print 123 directly. From this you can parse the above two sentences about global variables. Variables declared globally are called global variables. The scope of a global variable is global. Local variables are usually scoped inside functions. The Global scope is called GO, short for Global Object. A temporary scope becomes an AO, or Activation Object. And GO can be interpreted as the window object. GO and AO are understood in conjunction with JS precompilation.


[Precompilation formula]

1. Create GO/AO objects.

2. Find the parameter and variable declarations and use the variable and parameter names as the AO attribute names with the value undefined.

3. Unify the argument values and parameters.

4, find the function declaration inside the function body, value assigned to the function body.


Look at the code below to understand GO and AO.

Look at the code below to understand GO and AO.


The variable A is defined globally. B is the function declared globally. So GO now has two values, as shown below.


Before executing the JS code, the JS engine will compile the JS code. The process of compiling is the process of defining the scope. And the outermost scope is called GO, and GO now has a and B, both of which are undefined. The first two sentences of the precompiled formula are completed. And since this is GO, I don’t care about the third formula. Then we will implement the fourth formula. GO becomes the image below.


So the value of b is a function body. After completing the above four precompiled formulas, GO is now defined. When precompilation is complete, the code is executed sequentially. Line 1 is then executed. So the value of A becomes 123. Lines 3-5 can be ignored while JS is running. Because it has been improved at the time of precompilation. So I run line 7. After line 7 runs, lines 3-5 are executed. Because lines 3-5 are a function body. So you need to precompile again. The function creates an AO. And it inherits everything in the scope of the parent function. The following figure resolution


Function B produces an AO. In this process, the AO of function B first checks for parameters, which form aa. It also detected that a variable c was defined. After running the first two [precompiled formula], the content shown in the figure above is formed. This is followed by the third rule: unify the argument values and parameters. So the value of aa becomes 123 (passing a value to aa when b is executed). Finally, look for the function declaration in function B. Because there’s no function declaration here. So you end up with something like this.


That completes the precompilation of function B. All the next steps are just execution. For example, perform an assignment to variable C that eventually makes it 888. The above is the whole JS execution process and the principle of precompilation. Memorize [precompilation formula].




From here on out is a short example of precompilation (more examples of what precompilation is).


The above code, when executed (including when precompiled), will look like the following figure.


[Precompilation formula]

  1. Create the GO/AO object.
  2. Find the parameter and variable declarations and use the variable and parameter names as the AO property names, with the value undefined.
  3. Unify argument values and parameters.
  4. Find the function declaration inside the function body and assign the value to the function body.

Function declarations are first-class citizens. **** If the function and variable names are the same during precompilation. **** function wins!

Wechat public number: my web front-end self-help road

Reply to add group, exchange technology with the big guys