preface

I believe that learning front-end knowledge partners, once to study the underlying KNOWLEDGE of JS, are some variable declaration to promote, function declaration to promote get enlightened. Finally, think about what a piece of JS code is and what order it runs in. It’s still ambiguous. Next, I will lead you to use simple easy to understand, concrete steps to examine and understand the JS code running order, each stage does what? Really open the door to the JS world!

Let’s think about it

Let’s start with the code.

var global = 100
 function fn() {
   console.log(global);
}
fn()
Copy the code

Imagine if the interviewer asks you: What does this code end up printing? You’ll probably think he’s insulting you. That’s 100. But if the interviewer asks you again, where did the 100 come from? Can you answer it?

In fact, the interviewer is asking you this question to see if you know what happens when the JS code is running. At this point, many people are already thinking about making a statement about ascension. This is the order in which you think about code in terms of declaration promotion

var global // Variable declaration is promoted
function fn(){ // The function declaration is promoted
console.log(global)}global = 100 // Assign variables
fn() // Function execution
Copy the code

Seeing this, a lot of people would say no more. So keep that in mind and look at the code below

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

What order does this code run in? Start claiming ascension? By now, you should know what I’m talking about, thinking about the order in which a piece of code will run in terms of declaration promotion and scope. If the code is simple, it’s easy, but if the code has a lot of declaration operations and assignment operations, it will waste a lot of time, and the error rate is very high.

Dry goods

Function in the body

Take the code above as an example of code running inside a function. In fact, THE JS run can be divided into the compile phase and the execution phase. So what happens in these two phases?

In the above code

  • Compilation phase
    • Start by creating an AO (Activation Object) object
    • Then go to the parameter and variable declarations and make them the attribute names of the AO object with the value undefined
    • Again, unify the arguments and parameters
    • Finally, find the function declaration and give the function name as the attribute name of the AO object, and the value to the function body

So with that in mind, let’s look at this code again

function fn(a) { // 2. The parameter is a, and the value is undefined
      console.log(a); // function() {}
      var a = 123; / * * * * * * * * * * * * * * * * *
      console.log(a); / / 123
      function a() {}// a is a function
      console.log(a); / / 123
      var b = function() {} // 2. Declare the variable b as undefined
      console.log(b); // function() {}
      function d() {} // 4. Declare d as a function
      var d = a // 2, d = undefined
      console.log(d); / / 123
    }
    // The first step is to create the AO object by compiling the function before execution
    AO: {// The second step is to start looking for parameter and variable declarations and write AO
        a:undefined 1 function (){}
        b:undefined 
        d:undefined function(){}
        // The third step is to pass the argument to the parameter, so the value of a is now 1
        // Step 4: find the function declaration and write AO
    }
    fn(1)
Copy the code

At the end of the compilation phase, the attributes and values in the AO object are:

AO:{
    a:function(){}
    b:undefined
    d:function(){}}Copy the code

Now, let’s execute the entire function by looking at the values of the attributes in the AO object.

  • Execute the function starting with fn(1)
  • The first log is going to be a, so if you look for a in AO, it’s function(){}. A is then assigned to 123 and the A in the AO object is updated accordingly
  • The second log is going to be a again, so if you look for a in AO, it’s going to be 123. The variable b is then assigned to a function and the AO is updated accordingly
  • Function (){} = function(){} = function(){} = function(){
  • The fourth log is d, so it’s 123

At this point, this code is done, so why don’t you go back and look at it, okay? Is it that simple? To prove I’m not being a bully, you can go for a run and compare.

And the smart ones immediately wonder, well, this is just inside the function, but what does it look like globally. All I can say is: Easier, keep watching…

Under the global

In the body of the function, I summarize the entire compilation phase as a tetralogy. In the grand scheme of things, three moves is enough. One more and I lose.

  • First, create a GO (Global Object) object
  • The second step is to find the variable declaration, and use the variable declaration as the GO attribute name, with the value undefined
  • Step 3: Find the function declaration in the global, and give the function name as the property name of the GO object

Three steps. That’s it. The code, as usual:

GO: {fn:function(){}}global = 100
function fn() {
   console.log(global); // undefined
   global = 200
   console.log(global); / / 200
   var global = 300
}
AO: {global:undefined
}
fn()
Copy the code
  • Compile phase, three steps to go!
    • Step 1: Create a GO object
    • The second step is to find a variable declaration. There is no such thing as an assignment statement and a function declaration globally
    • The third step is to find the function declaration, so the compile phase in the GO object is only fn

    When you compile here, you compile the global, and then you compile the body of the function

    • First, create an AO object
    • Step 2: Find the parameter and variable declaration. There is no parameter here. The variable global is declared with the value undefined. Write to AO
    • Step 3: Pass parameters, argument parameters are not
    • Step 4: Find a function declaration

    At this point, the entire compilation is over and you can start executing.

  • Execution phase
    • The assignment statement is executed first. Since global is not defined in global, it is mandatory to declare a global and assign 100 to GO
    • Then go to fn() and execute the body of the function.
    • The first log is global, and the first log is undefined. So output undefined
    • Make an assignment to update the global value in the AO to 200
    • The second log is going to be global, so it’s already 200, so it’s going to print 200
    • Finally, the AO’s global is assigned 300

When you look at this and think about it again, does it feel very clear? So let’s summarize this a little bit

conclusion

  • The four steps of compilation within a function occur before the function is executed
    1. Creating an AO Object (Activation Object)
    2. Find the parameter and variable declarations and use them as the attribute names of the AO object with the value undefined
    3. Unify arguments and parameters
    4. Look for the function declaration in the body of the function. Use the function name as the attribute name of the AO object and assign the value to the body of the function
  • The global compilation three-step process takes place at the beginning of the code
    1. Create a GO object
    2. Find the variable declaration and give the value undefined as the property name of the GO object
    3. Find the global function declaration, and give the function name the property name of the GO object, and the value to the function body

    See here, small partners should be transparent many, but review the whole article, will feel how to say so simple, will not be deep enough? Actually, this is where the action is. You might as well imagine, now that you can use this method to understand what JS code is running, then, combined with this knowledge, to think about the profound implementation context, scope, declaration promotion, this time, JS doors really open for you. You’ll see what it means to be transparent.

(If you like it, please leave it in the comments section!)

  • If there are problems in the article, or the big guys have better opinions, you can discuss in the comments, the author will reply and modify, and make progress together!