Deep understanding of the JavaScript Scope series third--declaration promotion (hoisting)

xTable of Contents [1] variable [2] function [3] before the first word

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 is executed, the console output 2 var  = 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 lifted, it becomes the following var  = 0; function fn () {    var  b;    Console.log (b);     = 1;     function Test () {        var  c;        Console.log (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 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  function() {    console.log (1);}

Even a named function expression cannot be promoted

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

// after declaring the promotion, the code becomes: var Foo;foo (); // Typeerror:foo is not a function 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 function Bar () {    console.log (1);}; Bar (); // Typeerror:bar is not a function

function first

Both function declarations and variable declarations are promoted. However, the function is promoted first, then the variable

Console.log (typeof Foo); // ' function ' var foo = 1; Console.log (typeof Foo); // ' number ' function foo () {}

// after declaring the promotion, the code becomes: function foo () {}; var Foo;console.log (typeof Foo); // ' function 'foo = 1; Console.log (typeof Foo); // ' number '

After declaring the promotion, the function foo () is declared at the top of the code fragment. The Foo variable declaration is not actually useful because it is a duplicate declaration. So when executing Console.log (typeof foo), the foo identifier represents the Foo () function, so the output ' function ' is displayed. Then Foo is assigned a value of 1, then output ' number '

[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 (); // 2 function 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--declaration promotion (hoisting)