Explanation of javaScript function object declaration _ javascript tips-js tutorial

This article mainly introduces the declaration of javaScript function objects. For more information, see Reason for writing:　　

When I use js to write a function, I usually declare a function in the form of function fn, when I read some excellent plug-ins, I can't help but see the creation of functions such as var fn = function () {}. What are the differences between them, today, in the spirit of breaking the casserole to the end, let's talk about this fascinating function declaration.

Function Declaration

Function declaration sample code

The Code is as follows:

Function fn (){
Console. log ('fn function execution ..');
// Code ..
}

In this way, we declare a function named fn. Let's think about it. Do you think it will be executed if you call this function? Or will an error be reported?

Fn (); // call the fn function we declared earlier

The Code is as follows:

Function fn (){
Console. log ('fn function execution ..');
// Code ..
}

Console output result:

Yes, the fn function can be called at this time. Here we will summarize the cause.

Summary:

1: At this time, the fn function is the result of the variable, which is stored in the Global Context variable by default (it can be verified by window. function name)

2: This method is a function declaration. They are available in the Global Context stage creation and code execution stage. Ps: javaScript initializes the Context Environment (from global to local) every time it enters the method)

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

Function expression

Function expression sample code

The Code is as follows:

Var fn = function (){
Console. log ('fn function [expression] Declaration execution ..')
// Code ..
}

In this way, we declare an anonymous function and point its reference to the variable fn?

The function declared in the expression is called every time in the upper and lower sides to view the output result of the console.

The Code is as follows:

// To clearly view the output of the console, we make a mark before and after each call to increase readability.
Console. log ('previous call started ..');
Fn ();
Console. log ('call ended before ..');
Var fn = function (){
Console. log ('fn function [expression] Declaration execution ..')
// Code ..
}
Console. log ('call later to start ..');
Fn ();
Console. log ('call later to start ..');

Result printed on the console:

The Code prompts fn is not a function (fn is not a method) when calling the fn () function for the first time and terminates the operation when an error occurs.

This indicates that when fn () is called for the first time, the var fn variable does not exist as an attribute of the global object, and the anonymous function context referenced by fn is not initialized, so the call failed before him.

The Code is as follows:

// Comment out the previous call logic first, and then view the output in the console.
// Console. log ('previous call started ..');
// Fn ();
// Console. log ('call ended before ..');
Var fn = function (){
Console. log ('fn function [expression] Declaration execution ..')
// Code ..
}
Console. log ('call later to start ..');
Fn (); // called after the expression
Console. log ('call later to start ..');

Result printed on the console:

We can see that it is okay to call the expression function after the expression function. To sum up, why?

Summary:

1: first, the variable itself does not exist as a function, but is referenced by an anonymous function (value type does not belong to reference)

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

3: This type of declaration is generally common in Plug-in development. It can also be used as a callback function call in the closure.

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