Before we get started, let’s look at how the following code works:

function a(){
    console.log('Hello');
}
a();

function a(){
    console.log('World');
}
a();
Copy the code

In the order in which the code is written, it should print ‘Hello’ and then ‘World’, but it doesn’t; both calls print ‘World’.

Well, if I put it in a functional expression, it’s going to be different

var a = function(){
    console.log('Hello');
}
a();

var a = function(){
    console.log('World');
}
a();
Copy the code

This code is executed as follows:

So what is the reason for the difference in the way these two functions are declared?

That’s because the JS engine has a precompilation process before the function is executed.

precompiled

Precompilation takes place before the function is executed, and the whole process can be described in four sentences:

  • Create an AO Active Object.
  • Find the parameter and variable declarations and assign undefine;
  • Unify arguments and parameters;
  • Find the function declaration and give the variable a pointer to the function.

To illustrate this process, use the following code:

function test1(a, b) {
    console.log(a);  
    c = 0;
    var c;
    a = 3;
    b = 2;
    console.log(b); 
    function b() {}
    function d() {}
    console.log(b); 
}
test1(1);
Copy the code
  1. Create an AO active object:
AO{

}
Copy the code
  1. Find the parameter and variable declarations and assign undefine:
AO{
    a: undefined,
    b: undefined,
    c: undefined
}
Copy the code
  1. Unify arguments and parameters:
AO{
    a: 1,
    b: undefined,
    c: undefined
}
Copy the code
  1. Find the function declaration and give the variable a pointer to the function:
AO{
    a: 1,
    b: function(){},
    c: undefined,
    d: function(){}
}
Copy the code

So what is the difference between function declarative definition and function expression definition in this process?

The difference is the timing of assigning a pointer to a function to a variable.

A function declarative definition assigns a pointer to a function to a variable at the last step of precompilation; A function expression definition, on the other hand, is equivalent to defining a variable, which is always undefined during the precompilation phase of the code, and then giving the variable a pointer to the function when the execution context executes.

As you can see from the following code, function declarative definitions give variables Pointers to functions before code execution, while function expression definitions remain undefine.

function a(){
    console.log('Hello');
}
console.log(b);
var b = function(){
    console.log('World');
}
Copy the code

So the reason why the two ends of the code are different in the beginning is that:

  • In the first section of the code, the precompile phase has already determined which function the variable refers to. That is, the second function declaration overwrites the first function, so the variable always refers to the second function.
  • In the second piece of code, the variable is always zero during the precompilation phaseundefinedWhen the function is executed, the variables in turn are given Pointers to the function.

The above are the author’s personal understanding, if you have any questions please point out!

References:

Understand the execution context in JavaScript

Js precompiled