JavaScript function declaration and function Expression Difference Analysis _ basics

When you use JS to write functions at ordinary times, it is common to declare a function in the manner of the customary function fn () {}, and when reading some excellent plug-ins it is unavoidable to see var fn = function () {} The creation of such functions, what is the difference between them, today in the spirit of breaking the sand Pot to ask the end of the spirit, well to say this fascinating--function declaration.

function declaration

Function Sound Example code

Copy Code code as follows:

function fn () {
Console.log (' fn function executes ... ');
Code..
}

So we're going to declare a function called FN, and here's a thought, do you think that calling him on the top of this function will execute? Or do you have an error?

Copy Code code as follows:

FN (); In the previous call we declared the FN function function fn () {console.log (' fn function execution ... ');//Code ...}

Console output Results:

Yes, at this point the FN function can be invoked, here to summarize the reason.

Summarize:

1: At this point the FN function is the result of the variable, which is stored in the global context variable (available window. function name to validate)

2: This way is the function declaration, which is created in the global context phase, and is already available in the code execution phase. Ps:javascript initializes the context environment (by global → Local) Every time the method is entered.

3: It can affect variable objects (only the variables stored in the context are affected)

function expression

function Expression Sample Code

Copy Code code as follows:

var fn = function () {
Console.log (' fn function ' expression declaration execution ... ')
Code..
}

So we declare an anonymous function and point its reference to the variable fn?

Once again, call the upper and lower sides of the function declared by the expression to see the output of the console.

Copy Code code as follows:

In order to see the output of the console clearly, we make a mark before and after each call to increase the readability.
Console.log (' Before call begins ... ');
FN ();
Console.log (' Before call ends ... ');
var fn = function () {
Console.log (' fn function ' expression declaration execution ... ')
Code..
}
Console.log (' After call begins ... ');
FN ();
Console.log (' After call begins ... ');

Console Print Results:

You can see that the code, when it executes to the first invocation of the FN () function, is prompted that the FN is not a function (FN isn't a method), and that the operation terminates when an error is encountered.

This means that when the first invocation of FN (), the var fn variable does not exist as a property of the global object, and the anonymous function context of the FN reference is not initialized, so the call failed before him.

Copy Code code as follows:

Now let's comment out the previous call logic, and then look at the output of the console.
Console.log (' Before call begins ... ');
FN ();
Console.log (' Before call ends ... ');
var fn = function () {
Console.log (' fn function ' expression declaration execution ... ')
Code..
}
Console.log (' After call begins ... ');
FN (); Called after an expression
Console.log (' After call begins ... ');

Console Print Results:

As you can see, it's OK to call after the expression function, to sum up what is that?

Summarize:

1: First the variable itself does not exist as a function, but rather a reference to an anonymous function (a value type that is not part of a reference)

2: In the code execution phase, when initializing the global context, it does not exist as a global attribute, so it does not pollute the variable object

3: This type of declaration is generally more common in the development of Plug-ins, but also as a callback function in the closure of the call

Therefore, the function fn () {} is not equal to the var fn = function () {}, they are essentially different.

The above is the entire content of this article, the idea is very clear, the contrast is very clear, is a very good article, small partners must be carefully studied under