Analysis of JavaScript's lifting behavior and principles

For students who have just learned JavaScript, some of its behaviors may make you confused

It is very different from the C/C++ you learned in school
For example, this is the case

a = 1;var a;console.log(a);// 1

Some students may think that it should be undefined, because var a seems to have been reassigned to a
In this case again

console.log(a);// undefinedvar a = 1;

a is printed before it is declared, it should be Is it correct to report an error, or refer to the behavior of the browser above and should output 2?
However, the result is undefined

The code sequence you see is not necessarily the actual execution sequence of the js engine
This is the JavaScript improvement behavior I want to talk about today
In fact, writing this article is to supplement the knowledge of precompilation
If you don’t know about precompilation before reading, please click below
JavaScript precompilation
JavaScript's precompilation directly leads to its promotion behavior

Promotion behavior

In fact, by understanding precompilation, we can clearly understand why
precompilation occurs before execution
So executing these two code blocks is equivalent to executing code like this

var a;a = 1;console.log(a);// 1

var a;console.log(a);// undefineda = 1;

For this promotion behavior, remember these two sentences
Variable declarations are promoted, and function declarations are promoted as a whole
I emphasize again,

function demo(){….}这才叫做函数声明 
var demo = function(){….}这不叫函数声明

In fact, as long as you understand the precompilation principle, the promotion behavior is easy to understand

We are used to treating var a = 1 as a statement
But the js engine doesn't think so. It will split it into var = a declaration and a = 1initialization
and the first one is the compilation phase task. The second is the task of the execution phase
So no matter where your declaration appears in the scope, it will be processed in advance before execution
This is equivalent to moving the variable declaration and function declaration to the end of the scope. Top
This process is called Lifting

We must not declare repeated variables during the programming process, let alone declare functions and ordinary variables with the same name
By the way, it is a good habit to declare variables with a var at the top of the scope (single var principle)
This way you don’t have to worry about any promotion behavior

Example analysis

Nonetheless , we still need to understand this process, it is also the focus of the interview questions
Let’s take an old-fashioned example and see it

function a(a, b){
    console.log(a);    console.log(c);
    c = 0;    console.log(b);
    var c;
    a = 3;
    b = 2;    console.log(a);    console.log(c);    console.log(b);    function b(){};
    console.log(b);
}
a(1);

I don’t know if you are confused, a bunch of abc
The correct answer is:

1   undefined    function b(){}    3    0    2    2

Let’s analyze it from pre-compilation first, and review it by the way

1. Create AO object (Active Object)

2. Look for function formal parameters and variable declarations within the function. The formal parameter names and variable names are used as attributes of the AO object, and the value is undefined

3. The actual parameters and formal parameters are unified. Assign the actual parameter value to the formal parameter

4. Look for the function declaration, the function name is used as an attribute of the AO object, and the value is the function reference

Finally function a The AO object generated before execution is roughly like this

//伪代码AO->{
    a: 1
    b: function(){}
    c: undefined}

So it is equivalent to executing such a function
(the function name a does not conflict with the variables inside)

function a(){    var a = 1;    var b = function(){};    var c;

    console.log(a);//1
    console.log(c);//undefined
    c = 0;
    console.log(b);//function(){}
    a = 3;
    b = 2;
    console.log(a);//3
    console.log(c);//0
    console.log(b);//2
    console.log(b);//2}

So we are very relaxed Got the answer

If there is a variable declaration and a function declaration with the same name
The function declaration must override the variable declaration (JavaScript functions are the first citizens with various privileges)
If a variable declaration has the same name as Another variable declaration has the same name
or a function declaration has the same name as another function declaration
That is whoever is under the document takes precedence

Summary

The above is the JavaScript to share with you today Promotion behavior
is summarized in two sentences: Variable declaration promotion, overall function declaration promotion
In fact, it is an inevitable behavior caused by js engine pre-compilation

The above is JavaScript To improve the content of behavior and principle analysis, please pay attention to the PHP Chinese website (www.php.cn) for more related content!