preface

If you have different views on the answers, please kindly comment on the comments section for additional discussion. Of course, you are welcome to point out the questions in the comments section.

References + reference www.pianshen.com/article/846…

Let’s start with a quiz

  • If the following question can be correctly printed, there is no need to read this article, save time to play ball and date
function fn(a, c) {
    console.log(a)  //function a(){}
    var a = 123
    console.log(a) / / 123
    console.log(c) //function c(){}
    function a() {}if (false) {
        var d = 678
    }
    console.log(d) //undefined
    console.log(b) //undefined
    var b = function () {}console.log(b) //function(){}
    function c() {}console.log(c) //function c(){}
}

fn(1.2)
Copy the code

Comprehensive analysis of js engine execution process, divided into three stages

1. Grammatical analysis

After loading the JS code block, it will first enter the syntax analysis stage, which has the following main functions:

  • Analyze whether the syntax of the JS script code block is correct. If it is incorrect, a syntaxError will be thrown out to stop the execution of the JS code

2. Pre-compilation stage

After passing the parsing phase, when the syntax is correct, the precompilation phase is entered

Before analyzing the precompile phase, let’s take a look at the runtime environment of JS. The runtime environment mainly consists of three kinds:

1, global environment (js code after loading, into the precompilation is to enter the global environment)

2, function environment (function call, into the function environment, different functions, different function environment)

Eval environment (not recommended because of security and performance problems)

Each entry into a different execution environment will create a corresponding execution context, so in a SECTION of JS program will generally create multiple execution context, the JS engine will stack data structure to process these executions, forming the call stack. The bottom of the stack is always the global execution context, and the top is always the current execution context.

(1) Create function call stack

Function call stack is to use stack access to manage the operating environment, characterized by advanced back out, back in back out

Note: Different runtime environment execution will enter into the code precompilation and execution of two phases

function parent() {
    var A_context = "parent content";

    function child() {
        var B_context = "child content"; } child()} parent() the order of stack calls here: global execution context --parent function execution context --child function execution contextCopy the code

(2) Create execution context

Also known as the current execution environment, three things are done during the creation process:

1. Create variable Object (VO)

Create scope chain

The scope chain consists of the variable objects of the current execution environment (before entering the execution stage) and a series of active objects (AO) of the upper environment, which ensures that the current execution environment has orderly access to the variables and functions that meet the access permission.

3, Determine the direction of this (ignore for now)

Refer to this reference question juejin.cn/post/699872…

VO (variable object) creation process:

  • Create the arguments object, and check the parameters of the current context, established the object’s properties and property values, only (not arrow function) in the environment of the function, the global environment without this process.

  • Check the function declaration of the current context, search in code order, declare the function found in advance,

    • If the variable object in the current context does not have a function name attribute, a new attribute is created with the function name and the value of the attribute is referenced to the heap memory address of the function
    • If it exists, it will be overwritten by a new reference.

  • Check the variable declarations for the current context, looking in code order, and declaring the variables found in advance

    • If the variable object in the current context does not have a variable name attribute, create a new attribute with the value of undefined.
    • If it exists, the variable declaration is ignored.
tryfunction fun(m,n){
    var name = 'hzy';

    function execution(){
        console.log(name)
    }
}
fun(2.3FunEC = {VO: {// A variable object
        arguments: {/ / the arguments object
            m: undefined.n: undefined.length: 2
        },
        / / execution function
        execution: <execution reference>// scopeChain:[VO(execution), AO(fun), AO(global)], // This points to this: window}Copy the code

3. Execution phase

In the execution stage, a new article will be published for detailed analysis, mainly introducing the synchronous task execution and asynchronous task execution mechanism (Event Loop) in the JS execution stage.

Previous problems solved

Now let’s go back

VO: {// A variable object
    arguments: {/ / the arguments object
        a: undefined.'function a(){}'.c: undefined,},// Function variables
    d:undefined.b:undefined.'function () {}',} Print order:function a(){} (function override) --123--function c(){} (function override) --undefined--undefined--function(){} (variable declaration) --function c(){} (function override)Copy the code

conclusion

Feel good writing, helpful to you, you can share with people around you, the more you share knowledge, do not be stingy

Follow-up update front-end other knowledge summary, please pay attention to me, tidy up, share with you, we learn front-end together