JS runs 3 parts

The js running code is divided into three steps

Grammatical analysis Precompile Interpretation and execution

When JavaScript code is running, it will first parse the syntax, check whether there are low-level errors in the whole code, then precompile, sort out one internal logic, and finally start to execute the code one line at a time

Grammatical analysis

Before the code is executed, the system will scan the whole code once to check for low-level syntax errors, such as writing less braces.

Precompile

Precompile prelude

Precompilation occurs 1 moment before the function executes. Variable is assigned undeclared, which is owned by a global object

a = 3

var b = c = 4

The global variables declared by 1 cut are all attributes of window

var a = 1 ===> window.a = 1

Precompiled tetralogy

Create an AO (Activation Object) object (which stores local variables inside the function) Find the parameter and variable declaration, and use the variable and parameter name as the AO attribute name, and the value is undefined Combine arguments with formal parameters 1 Find the function declaration in the function body, and assign the value to the function body

Use an example to illustrate 1, or you can give an answer yourself first, and then continue to look down

function fn(a) {
 console.log(a);
 var a = 123;
 console.log(a);
 function a() {}
 console.log(a);
 var b = function() {};
 console.log(b);
 function d() {}
 console.log(d)
}
fn(1);

Step 1, Create AO (Activation Object) Object {} Step 2, Find the parameter and variable declaration, take the variable and parameter name as the AO attribute name, and the value is undefined

{
 a: undefined,
 b: undefined,
}

Step 3, combine the argument and the shape parameter 1

{
 a: 1,
 b: undefined,
}

Step 4: Find the function declaration and assign the value to the function body

{
 a: function a() {},
 b: undefined,
 d: function d() {}
}

So the values of a, b, and d are shown above at the first moment of the execution of the function fn

So the result of fn (1) execution is

// ƒ a() {} // 123 // 123 // ƒ () {} // ƒ d() {}

In the global scope, the precompilation process is slightly different

Create an GO (Global Object) object (which stores the global variables inside the function) GO === window Find the parameter and variable declaration, and take the variable and parameter name as the GO attribute name, and the value is undefined Find the function declaration in the function body, and assign the value to the function body

Interpretation and execution

1-line 1-line execution code

Practical problem

Here are a few examples. If you are interested, you can look at 1

function test(a, b) {
 console.log(a);
 console.log(b);
 var b = 234;
 console.log(b);
 a = 123;
 console.log(a);
 function a() {}
 var a;
 b = 234;
 var b = function() {};
 console.log(a);
 console.log(b);
}
test(1);

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

function test() {
 console.log(b);
 if (a) {
  var b = 100;
 }
 c = 234;
 console.log(c);
}
var a;
test();
a = 10;
console.log(c);

Summarize

In most cases, we deal with a precompiled process in the following way

Function declaration, overall promotion Variable declaration, declaration promotion

If you meet a complicated situation, you can only solve the problem in the most primitive way