• EC function execution environment (Execution Context)
• Execution Context Stack
• VO Variable Object (when declared, not executed)
• AO Active Object (after declaration, when executing statement)
• scope chain

EC

1. Global Code: excluding code in function body
2. Function code: Code in function body (excluding internal code of function in function body)
3. Eval Code: Eval internal code

ECS

Function execution stack, inbound when function VO is executed, and outbound when AO is finished

let a = 'Hello World!';

function first() {
  console.log('Inside first function');
  second();
  console.log('Again inside first function');
}

function second() {
  console.log('Inside second function');
}

first();
console.log('Inside Global Execution Context');

First, the first is used to enter the stack, then the second is used to enter the stack, then the first is executed, but the second is executed in the first, and then the first is executed.

VO

In execution context, parameter declaration, function declaration, variable declaration.
Parameter declaration function declaration variable declaration
If the variable object already contains an attribute with the same name, replace its value

function foo1(a){
    console.log(a)
    function a(){} 
}
foo1(20)//'function a(){}'

At this time, console.log(a) has completed the VO phase, that is, the upper declaration phase. Because of the function post declaration, all outputs are functions.
If the variable name is the same as the declared function name or the parameter name of the function, the existing properties will not be affected

function foo1(a){
    console.log(a)
    function a(){} 
    var a =1;
}
foo1(20)//'function a(){}'

A function is declared with a higher priority than a variable, and the definition process is not overridden by a variable unless it is an assignment

AO

function foo(i){
    var a = 'hello'
    var b = function(){}
    function c(){}
}
foo(22)

vo stage

ECObj = {
    scopChain:  {...},
     variableObject: {
        arguments: {
            0: 22,
            length: 1
        },
        i: 22,
        c: pointer to function c()
        a: undefined,
        b: undefined
    },
    this: { ... }
}

ao stage

ECObj = {
    scopeChain: { ... },
    variableObject: {
        arguments: {
            0: 22,
            length: 1
        },
        i: 22,
        c: pointer to function c()
        a: 'hello',
        b: pointer to function privateB()
    },
    this: { ... }
}

At this time, console.log (type of foo); console.log (type of bar); after function declaration stage (vo)

(function() {
    console.log(typeof foo); // Function pointer
    console.log(typeof bar); // undefined

    var foo = 'hello',
        bar = function() {
            return 'world';
        };
        
    function foo() {
        return 'hello';
    }
}());

At this time, console.log() is the post execution phase (ao)

(function() {
    var foo = 'hello',
        bar = function() {
            return 'world';
        };
        
    function foo() {
        return 'hello';
    }
    
    console.log(typeof foo); // string
    console.log(typeof bar); // function
}());