JS runs in three steps

  1. Parsing: Scans for syntax errors, but does not perform them

  2. precompiled

  3. Explain execution: Explain a row to execute a row

When does precompilation happen?

Global precompilation occurs when the page is loaded, while functional precompilation occurs just before the function is executed.

Precompilation improves function declarations and variable declarations

Precompilation prelude

  1. imply globalImplied global variable: Any variable that is owned by the global object if it is assigned an undeclared value.
// eg(exempli gratia):
a = 123;
var a = 123;
Copy the code
  1. All declared global variables are properties of the window.
eg: var a = 123; ===> window.a = 123;
Copy the code

Precompiled tetralogy:

  1. Create an AO(Activation Object, execution context) Object

  2. Find the parameter and variable declarations and assign the variable and parameter names as the attribute names of the AO object with the value undefined

  3. Concatenates the value of the argument with the parameter

  4. Find a function declaration (not a function expression) with the value assigned to the function body

Note: there is no third step for the Global pre-compiled invisible parameter, which is called GO(Global Object, window).

Example of function precompilation

function fu(a){
    console.log(a);

    var a = 123;

    console.log(a);

    function a(){}

    console.log(a);

    var b = function(){}

    console.log(b);

    console.log(d);

    var d = 456;

    function d(){}
    
    console.log(d);

    var d = function(){}

    console.log(d);
  }
  fu(7);
Copy the code
The first step

Creating an AO Object

AO {

}
Copy the code
The second step

Find the parameter and variable declaration, the parameter has a, the variable declaration has a, b, d, as the AO object property name, the value of undefined.

AO {
    a: undefined,
    b: undefined,
    d: undefined
}
Copy the code
The third step

The argument and parameter are unified, and the argument 7 is dropped to parameter A

AO {
    a: 7,
    b: undefined,
    d: undefined
}
Copy the code
The fourth step

Find the function declaration, the function declaration has fun a,fun d, and the value is given to the function body.

AO {
    a: function a(){},
    b: undefined,
    d: function d(){}
}
Copy the code
Explain to perform

At this point the precompilation ends and the execution code is explained, resulting in the following:

function fu(a){
    console.log(a); // function a(){}

    var a = 123;

    console.log(a); // 123

    function a(){}

    console.log(a); // 123

    var b = function(){}

    console.log(b); // function(){}

    console.log(d); // function d(){}

    var d = 456;

    function d(){}

    console.log(d); // 456

    var d = function(){}

    console.log(d); // function(){}
  }
  fu(7);
Copy the code

Examples of global precompilation

Precompile to GO object, regenerate to AO object, see the following example:

console.log(test);
  function test(){
    console.log(test);
    var test = 123;
    console.log(test);
    function test(){}
  }
  test(1);
  var test = 234;
Copy the code
The first step

Create the GO object

GO {

}
Copy the code
The second step

The global has no parameters and only finds the variable declared test as the GO object property name with the value undefined.

GO {
    test: undefined
}
Copy the code
The third step

There is no global third step

The fourth step

I’m going to find the function declaration, and the function declaration has fun test, and the value is given to the function body.

GO {
    test: function (){...}
}
Copy the code
Explain to perform

Function precompilation occurs just before the function is executed, so the AO object is precompiled just before test is executed before the function body is executed

console.log(test); Test: function (){}} */ function test(){console.log(test); Function (){} var test = 123; console.log(test); // 123 function test(){} } test(1); var test = 234;Copy the code

practice

1.
function test(){
    console.log(b);
    if(a){
      var b = 100;
    }
    c = 234;
    console.log(c);
  }
  var a;
  test();
  a = 10;
  console.log(c);
Copy the code
2.1
function bar() {
    return foo;
    foo = 10;
    function foo() {}
    var foo = 11;
  }
  console.log(bar());
Copy the code
2.2
console.log(bar());
  function bar() {
    foo = 10;
    function foo() {}
    var foo = 11;
    return foo;
  }
Copy the code
3.
a = 100;
  function demo(e){
    function e() {}
    arguments[0] = 2;
    console.log(e);
    if(a){
      var b = 123;
      function c() {}
    }
    var c;
    a = 10;
    var a;
    console.log(b);
    f = 123;
    console.log(c);
    console.log(a);
  }
  var a;
  demo(1);
  console.log(a);
  console.log(f);
Copy the code