Thoroughly understand the priority of function declaration and function expressions

This article discusses the differences between function declarations and function expressions, and the most painful priority.Article.

The reason why I wrote this article is that I saw an article related to this article on the Internet that provided the results but did not analyze the reasons, and I am not sure about it, so I decided to try it myself, and record it so that you no longer need to think about such problems in the future.

Function declaration is a function name () {}Code. First, make sure that the following code is completely correct:

 
T1 ();FunctionT1 () {console. Log ("T1");}
 

 

That is, the function can be called in advance and then declared.

Why? Because JavaScript code is a piece of preload (that is, a set of SCRIPT tags), after a piece of code is pre-loaded, the function declaration will be executed before the code segment, so that the code can be called anywhere in the code segment, so the previous code is correct-I don't know if the real principle is true, like this.

A function expression attaches an anonymous function to a variable. To call this function in the future, you can directly call this variable. For example:

VaRT1 =Function() {Console. Log ("New T1");} T1 ();
 

 

Function expressions do not have the advantage of direct function declaration.NoCall and then declare.

Why? Because a function expression attaches a function to a variable as its value, and a variable is called before it is declared, an error occurs. Is this a good idea?

In fact, when I talk about the principle, it seems that the following questions are no longer difficult, but I 'd like to write it out to you. Question 1:

FunctionT1 () {console. Log ("T1");} T1 ();FunctionT1 () {console. Log ("New T1");} T1 ();VaRT1 =Function() {Console. Log ("New T1");} T1 ();VaRT1 =Function() {Console. Log ("New T1");} T1 ();
 

 

Determine the output result of the above Code. Of course, it is certainly not the following results:

T1,
New T1,
New T1,
New T1

This involves the issue that the previously mentioned "function declaration will advance". The above code is actually the same as the following code:

FunctionT1 () {console. Log ("T1");}FunctionT1 () {console. Log ("New T1");} T1 (); T1 ();VaRT1 =Function() {Console. Log ("New T1");} T1 ();VaRT1 =Function() {Console. Log ("New T1");} T1 ();
 

 

In this row, I believe that most people will give the correct results, that is:

New T1
New T1
New T1
New T1

Because the above Code has two function declarations with the same name, and it is obvious that the subsequent functions with the same name will overwrite the previous functions, so only "New T1" takes effect.-Is there any doubt about this?

There is no advance issue for the two subsequent var T1, but they will still overwrite the element with the same name, resulting in the replacement of the previous element with the same name (that is, the T1 function declaration.

Next, change the question to question 2:

 
FunctionT1 () {console. Log ("T1");} T1 ();FunctionT1 () {console. Log ("New T1");} T1 ();VaRT1 =Function() {Console. Log ("New T1");} T1 ();//Note the following:FunctionT1 () {console. Log ("New T1");} T1 ();
 

 

Note that the last part of this Code is to change the function expression of VaR T1 to function T1. What are the results of this question?

Use the previous "advance principle" to sort out the Code as follows:

 
FunctionT1 () {console. Log ("T1");}FunctionT1 () {console. Log ("New T1");}FunctionT1 () {console. Log ("New T1");} T1 (); T1 ();VaRT1 =Function() {Console. Log ("New T1");} T1 (); T1 ();
 

 

After sorting out the code, I found that the code is no longer difficult: the first three function declarations with the same name are also effective only for the last one, so the subsequent two T1 () calls are outputNew T1And the subsequent var T1 overwrites the previous function declaration, so the subsequent two T1 () calls will output the overwritten results, that isNew T1.

New T1
New T1
New T1
New T1

The code for Question 2 and question 1 is different in the declaration method of the last function, but the output results are completely different.

After writing it, I found that I wrote such a simple article, er. In short, you remember that the direct function declaration will advance, and the function expression will not. Do not make mistakes when sorting out the code order.

Original article link