Understanding precompilation from variable promotion is that simple, just play!!

Variable ascension

scope

precompiled

Before we get into JavaScript precompilation, let’s look at two gadgets that go hand in hand with precompilation!! (variable promotion and scope), variable promotion and scope has a close relationship, to the variable promotion and scope have a good understanding, then look at the precompilation, just like drinking water!! Let’s learn about variable promotion first!!

Focus here, focus here!!

Variable promotion (as)

Let’s forget about variable promotion and take a look at this example.

    var a = 112;
    console.log(a);
Copy the code

This is not so easy!! Console. log(a) outputs 112. (Thanks for pointing out… Originally it was 2…)

Let’s make a small change to the code above.

    a =112;
    console.log(a);
    var a;
Copy the code

If you have hands, you can’t output anything. If you have hands, you can directly report an error. You need to ask.

Without further explanation, let’s run the screenshot :(run this code on the browser console)

Friends are directly shocked!! How could that be? I’ll see you around.

Don’t worry, this is where we’re going to talk about variable promotion.

In JavaScript, function and variable declarations are promoted to the top of the function. Variables can be declared after they are used, that is, they can be used before they are declared. We know that there are two keywords in JS that declare variables (var and let), so what is the difference between them? Here we move on to another article to understand the differences between var and let.

As mentioned above, function declarations have also been improved. Here is another example:

fun();
function fun(){  
    var a = 456;
    console.log(a);
}
Copy the code

Here, we began to be cautious!! Compare the previous example, instant self-confidence burst!! Console. log(a) outputs 456; That’s it. I don’t know why.

You think this is the end of it? This is just what you think, let’s change the above example again :(sinister!

fun();
console.log(b);
var b = function fun(){  
    var a = 456;
    console.log(a); }} Fix: this code looks like this:console.log(b);
var b = function fun(){  
    var a = 456;
    console.log(a); } fun(); An error is also reported because the function name of a function expression cannot be used outside the function. This section is about understanding the difference between a function declaration and a function expressionCopy the code

And if you look at what happens here? Hey hey!!!!!

Run screenshots first!!

Sure enough there is a cheat!!

See a ghost, why report an error? Don’t function declarations promote variables?

Var b = function fun(){}; var b = function fun(){}; This is where we need to know the difference between a function declaration and a function expression.

So I think you’ve got an idea of variable promotion

Now let’s look at scopes

scope

Scope refers to the area in the program where variables are defined. This location determines the life cycle of variables (function scope, block-level scope is destroyed when used up). In popular understanding, scope is the accessible scope of variables and functions, that is, scope controls the visibility and life cycle of variables and functions

Scope is divided into:

Global scope: JS code written directly in a script tag is in the global scope. Variables in the global scope are global variables and can be accessed in any part of the page.
Function scope: When a function is called, the function scope is created, and when the function is finished, the function scope is destroyed

Global scope

Let’s talk about global scope first.

Global scope is defined globally!! Case, that’s a good point.

But it has to be explained. (Sneer)

The global scope is created when our page is open and destroyed when the page is closed
In the global scope there is a global object window, which represents a browser window. It is created directly by the browser and can be used directly

We don’t need to explain the first point. Let’s go straight to the second point. As usual, above example:

    <script>
        var a = 123;
        var b = 234;
        function fun(){
        }
    </script>
Copy the code

Things like this defined directly under script tags are promoted to place these declarations at the top of the global scope.

var a = 123;
console.log(window.a);
Copy the code

Here we can access a via window.a;

Function scope

Now that we know about global scope, let’s talk about function scope!

The same understanding is not too perfect, as the name implies, the region within the function.

Let’s do something else:

A new function scope is created each time a function is called, and they are independent of each other
Global-scoped variables are accessible from function scope, and function-scoped variables are not accessible from global scope
When operating on a variable in a function scope, the variable is searched in its own scope first. If it does not exist, the variable is searched in the next level up until the global scope is found. If the global scope is not found, an error is reported.

I believe everyone this thief is easy to understand, we will not do too much explanation, not on the example, or to an example, show a bit more professional (hey hey!!)

var a = 123
function fun(){
    console.log(a);   / / 123
}
fun();
Copy the code

The result is beyond doubt 123！！！！！！！！

Here’s another example (hint: cheating here)

var a = 123;
function fun(){
    console.log(a);
    a = 456;
}
fun();
console.log(a);
Copy the code

Don’t answer too quickly. Think about it. (Sneer) Three minutes

. . .

Three minutes up…

Screenshot again:

Doubt the first string ！！！！

What’s the problem here? Let’s think about it. If you look at fun(), there’s something wrong with a, there’s something very wrong with a. There is no declaration of a variable in the function. In the function, there is something like a = 456, undefined direct assignment, which is defined in the global scope. This explains why console.log(a) outside fun() outputs 456 and is overwritten. (The difference between var and let mentioned above)

Above two small dishes finished, now on the main course ！！！！

precompiled

Precompilation is divided into precompilation in function body and precompilation in global scope

Function body precompile tetralogy:

Creating an AO object (Activation Object)
Find the parameter and variable declaration, and use the parameter and variable declaration as the attribute name of the AO object with the value undefined
Unify arguments and parameters (assign an argument to a parameter)
Find the function declaration in the function body and assign the function name as the property name of the AO object

With the two appetizers above, the main course is much more interesting. As usual, serve peanuts (example) :

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

Start analyzing a wave with tetralogy: 1: Create one

AO:{
               
            }
Copy the code

2: find parameter and variable declarations: assign undefined to both

a:undefined
b:undefined
d:undefined
Copy the code

3: Unify arguments and parameters: (place 1 in a)

a:undefined---->1
b:undefined
d:undefined
Copy the code

End of step 3. Key Step 4:

a:undefined----> 1 ---->function a() {}
b:undefined
d:function d() {}
Copy the code

Walk four, start routine operation (sprinkling water!!) Just look at step 4: (consider the overwriting of variables defined by the var keyword.) The initial 1 passed in as an argument to a is overwritten by the second line var a = 123, which changes to 123

The first console.log(a) output function a() {} performs assignment from top to bottom without pressure: the second console.log(a) outputs 123; The third console.log(a) output 123 again; Console. log(d) outputs 123 because it assigns a function to bCopy the code

Without further ado, run the screenshot above:

It’s a perfect match. Amazing. This is the difference between function declarations and function expressions.

Precompile the trilogy globally

Create a GO Object (Global Object)
Look for the variable declaration as the attribute name of the GO object, with the value given to undefined
Find the function declaration globally and assign the function name as the attribute name of the GO object with the value assigned to the function body.

It’s almost like precompiling in the body of a function. It’s the same recipe, it’s the same taste. Let’s start with an example:

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

Follow the steps below:

Step 1 Create a GO object:

GO:{
              
            }
Copy the code

The second step is to find the variable declaration and assign the value to undefined:

GO:{
                global:undefined
                fn:undefined
            }
Copy the code

The end of step 2, step 3:

GO:{
                global:undefined;
                fn:function(){},}Copy the code

This is the global precompilation, see, there is a global function, so the function also needs to analyze a wave according to the above tetralogy: as before, I do not need to repeat the above tetralogy, I will post directly

AO: {
      global: undefined---->200---->300
    }
Copy the code

The article is over here, the instant waist does not ache the leg is not sour, the person also became confident!!

Understanding precompilation from variable promotion is that simple, just play!!

Variable promotion (as)

scope

Global scope

Function scope

precompiled

Function body precompile tetralogy:

Precompile the trilogy globally

Related Posts

What is the event flow in the DOM

Day20 – How to implement call and apply, bind

Configure the interface request address for the local/test/production environment according to process.env.node_env