Deep understanding of the JavaScript Scope series third

Previous words

It is generally assumed that JavaScript code executes from the top to the next line at execution time. But this is not exactly true, mainly because of the existence of a declaration of Ascension. This article is the third in-depth understanding of the JavaScript Scope series-declaration elevation (hoisting)

Variable declaration Promotion

A = 2; var a;console.log (a);

Intuitively, it is assumed to be undefined, because Var A is declared at a = 2, after which the variable is re-assigned because it is given a default value of undefined. But the real output is 2.

Console.log (a); var a  =  2;

Given the above features, you might think that this snippet will also output 2. But the real output is undefined.

The reason why all this is against the perception is that the compiler's compilation process

The first article describes the internal principles of the scope. The engine compiles the JavaScript code first before it is interpreted. Part of the work in the compilation phase is to find all the declarations and correlate them with the appropriate scopes.

All declarations, including variables and functions, will be processed first before any code is executed.

var a = 2;

This code fragment actually consists of two operations: var A and a = 2

The first definition declaration is made by the compiler during the compilation phase. The second assignment is left in place waiting for the engine to execute in the execution phase

When the declaration of variable A is lifted to the top, and then the code executes, the console outputs 2var a;a = 2; Console.log (a);

Declarations are "moved" from where they appear in the code to the top, and this process is called ascension (hoisting)

[note] Each scope will be promoted

Console.log (a); var a = 0;function fn () {    console.log (b);    var b = 1;    function test () {        console.log (c);        var c = 2;    }    Test ();} FN ();

After the variable declaration is promoted, it becomes the following var A; Console.log (a); a = 0;function fn () {    var B;    Console.log (b);    b = 1;    function test () {        var C;        Console.log (c);        c = 2;    }    Test ();} FN ();

function declaration Promotion

Declarations include two kinds: variable declarations and function declarations. Not only can the variable declaration be promoted, but the function declaration also has an elevation action

Foo (); function foo () {    console.log (1);//1}

The above code fragment was able to output 1 in the console because the Foo () function declaration was lifted as follows:

function foo () {    console.log (1);} Foo ();

Function declarations are promoted, but function expressions are not promoted

Foo (); var foo = function () {    console.log (1);//typeerror:foo is not a function}

The variable identifier foo in the above program is promoted and assigned to the global scope, so Foo () does not cause referenceerror. But Foo is not assigned at this time, and Foo () throws a TypeError exception due to an illegal operation caused by a function call to the undefined value

After the variable is lifted, the code looks like this: Var foo;foo (); foo = function () {    console.log (1);}

Even a named function expression cannot be promoted

Foo ();//typeerror:foo is not a functionvar foo = function bar () {      console.log (1);};

After declaring the promotion, the code becomes: Var foo;foo ();//typeerror:foo is not a functionfoo = function bar () {      console.log (1);};

[note] The name of the function expression can only be used inside the body of the function, not outside the body of the function

var bar;var foo = function bar () {    console.log (1);}; Bar ();//typeerror:bar is not a function

function overrides

Both function declarations and variable declarations are promoted. However, the function declaration overrides the variable declaration

var a;function a () {}console.log (a);//' function A () {} '

However, if the variable has an assignment operation, the final value is the value of the variable

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

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

[note] A duplicate declaration of a variable is useless, but a repeating declaration of a function overrides the previous declaration (either a variable or a function declaration)

Duplicate declaration of "1" variable is useless

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

' 2 ' because function declaration promotion takes precedence over variable declaration elevation, the declaration of a variable has no effect

var a;function a () {    console.log (1);} A ();//1

The function declaration after "3" overrides the previous function declaration

A ();//2function A () {    console.log (1);} function A () {    console.log (2);}

Therefore, you should avoid repeating declarations in the same scope

Deep understanding of the JavaScript Scope series third