function promotion and variable promotion in JavaScript

Lexical analysis Lexical analysis method:

JS Run before a similar compilation process is lexical analysis, lexical analysis is mainly three steps:

• Analysis parameters
• Declaration of the Re-analysis variable
• Analysis Function Description

The steps are as follows:

• The function generates an active object (active objects) at run-moment, called AO
• Analysis parameters

1. The function receives the form parameter, adds to the Ao property, and this time the value is undefine, for example Ao.age=undefine
2. Receives an argument, adds an attribute to the AO, overwrites the previous undefine

• Analyze variable declarations, such as Var age, or Var age=23;

1. If the AO has no age attribute in the previous analysis parameter, the AO attribute is added as Undefine, which is ao.age=undefine
2. If the AO above already has the age attribute, no modification is made

• The declaration of the parse function, if there is a functional age () {}

Assign a function to Ao.age, overwriting the value of the previous analysis

code Example 1

So we first understand lexical analysis through a piece of code:

Lexical analysis phase: equivalent to:

• The first form of active object is the AO object

• First step: Analysis of formal parameters

Ao.age = Undefine

An incoming argument overwrites the Ao.age=undefine:

Ao.age = 3

• Step two: Analyze local variables

There is var age = 27;

This time follows if the Ao.age existence value does not make any changes, according to the final result of the first step analysis Ao.age = 3, so there is no modification here:

Ao.age = 3

• The third step: the Declaration of the analysis function,

Because the function age () {} function exists

So, according to the rules, the function should be assigned to ao.age. Ao.age = 3 that covers the second step of the analysis:

Ao.age = function Age () {}

Implementation phase

When you execute the T1 function, to Console.log (age), the last ao.age= function of the lexical analysis is () {}, so it prints:

Function age () {}

var age=27; Assign an age value of 27

At this time of the second Console.log age has been re-assigned to 27, so this time it will print:

27

function age () is not called so it does not execute

By the third Console.log (age), the value of the age has not been modified again, so this time it will print:

27

Running JS View results are exactly the same as our analysis:

code Example 2

As with the lexical analysis process above

Lexical Analysis phase:

Equivalent to:

• The first form of active object is the AO object

• First step: Analysis of formal parameters

Ao.age = Undefine

An incoming argument overwrites the Ao.age=undefine:

Ao.age = 22

• Step two: Analyze local variables

The first step in the last get ao.age = 22

So here Var age, and var age = 23, because the Ao.age attribute already exists value, so this time follow if there is no modification, that is:

Ao.age = 22

• The third step: the Declaration of the analysis function,

Because the function age () {} function exists

So, according to the rules, the function should be assigned to ao.age. Ao.age = 22 that covers the second step of the analysis:

Ao.age = function Age () {}

Implementation phase

When you execute the T1 function, to Console.log (age), the last ao.age= function of the lexical analysis is () {}, so it prints:

Function age () {}

var age=23; Assign an age value of 23

At this time of the second Console.log age has been re-assigned to 23, so this time it will print:

23

function age () is not called so it does not execute

By the third Console.log (age), the value of the age has not been modified again, so this time it will print:

23

Running JS View results are exactly the same as our analysis:

code example 3

Lexical Analysis phase:

Equivalent to:

• The first form of active object is the AO object

• First step: Analysis of formal parameters

Ao.age = Undefine

An incoming argument overwrites the Ao.age=undefine:

Ao.age = 22

• Step two: Analyze local variables

The first step in the last get ao.age = 22, so here to follow, if the Ao.age existence value is not made any modification is:

Ao.age = 22

• Step three: Declaration of the Analysis function

Because the function age () {Console.log (age)} function exists

So, according to the rules, the function should be assigned to ao.age. Ao.age = 22 that covers the second step of the analysis:

Ao.age = function Age () {Console.log (age)}

Implementation phase

When you execute the T1 function, to Console.log (age), the final ao.age= function of the lexical analysis () {Console.log (age)} is printed:

Function age () {Console.log (age)}

Age = 23, this time overwrites the original function-age () {console.log}, so the second console.log will print:

23

function age () is a functional expression, so no action is done

Age () At this time is not a function expression, so there will be an error.

Running JS View results are exactly the same as our analysis:

Here's a hint that the error does say that age is not a function

code Example 4

Lexical Analysis phase:

• The first form of active object is the AO object

• First step: Analysis of formal parameters

Ao.age = Undefine

An incoming argument overwrites the Ao.age=undefine:

Ao.age = 23

• Step two: Analyze local variables

The first step in the last get ao.age = 23, so here to follow, if the Ao.age existence value is not made any modification is:

Ao.age = 23

• Step three: Declaration of the Analysis function

Because the function age () {Console.log (age)} function exists

So, according to the rules, the function should be assigned to ao.age. Ao.age = 23 that covers the second step of the analysis:

Ao.age = function Age () {Console.log (age)}

Implementation phase

When you execute the T1 function, to Console.log (age), the final ao.age= function of the lexical analysis () {Console.log (age)} is printed:

Function age () {Console.log (age)}

function age () is a functional expression, so no action is done

Age () This time the age is a function expression, which executes the function age () {Console.log ()}, at which time the Console.log is not modified so the age () { Console.log (age)}, which is printing:

Function age () {Console.log (age)}

The last Console.log (age), where age is not modified or function age () {Console.log (age)}, prints:

Function age () {Console.log (age)}

Running JS View results are exactly the same as our analysis:

code Example 5:

Lexical Analysis phase:

• The first form of active object is the AO object

• First step: Analysis of formal parameters

Ao.age = Undefine

An incoming argument overwrites the Ao.age=undefine:

Ao.age = 23

• Step two: Analyze local variables

The first step in the last get ao.age = 23, so here to follow, if the Ao.age existence value is not made any modification is:

Ao.age = 23

• Step three: Declaration of the Analysis function

There is no function declaration expression here

So the result of the final analysis is:

Ao.age = 23

Implementation phase

The last ao.age=23 of lexical analysis when performing the T1 function to Console.log (age)

So the first Console.log (age) will print

23

var = function () {Console.log (age)}, where var = 23 is overwritten this time, age is a function expression

The age () is called function () {Console.log (age)}, and at this time the Console.log (age) In this function is not modified or a function expression, so it prints

function () {Console.log (age)}

The last Console.log (age) or print:

function () {Console.log (age)}

Running JS View results are exactly the same as our analysis:

code example 6:

code example 6 and the analysis of code example 5 are basically the same, the result is the same:

Summarize:

The function promotion is higher than the variable promotion priority!

function promotion and variable promotion in JavaScript