Reason for writing:
When writing functions in js, we usually declare a function in the form of convention function fn () {}. When reading some excellent plug-ins, we can't help but see the creation of functions such as var fn = function () {}. What is the difference between them? Today, we will talk about this fascinating function statement in the spirit of breaking the casserole to the end.
Function declaration
Function declaration sample code
The code copy is as follows:
function fn () {
console.log('fn function execution..');
// code..
}
In this way, we declare a function named fn. Here is a thought. Do you think it will be executed if it is called on this function? Or will an error be reported?
fn(); // Call the fn function we declared before
The code copy is as follows:
function fn () {
console.log('fn function execution..');
// code..
}
Console output result:
Yes, the fn function can be called at this time, so let’s summarize the reasons here.
Summarize:
1: At this time, the fn function is the result of a variable and is stored in a variable in a global context by default (can be verified by the window. function name)
2: This method is function declaration, and they are already available when entering the global context stage and entering the code execution stage. ps: javaScript will initialize the context environment each time it enters the method (from global → local)
3: It can affect variable objects (only affect variables stored in the context)
Function expressions
Function expression sample code
The code copy is as follows:
var fn = function () {
console.log('fn function [expression] declares execution...')
// code..
}
So we declare an anonymous function and point its reference to the variable fn?
Again, call it once above and below the functions declared by this expression to see the output results of the console.
The code copy is as follows:
// In order to clearly see the output of the console, we make a mark before and after each call to increase readability.
console.log('Before the call starts...');
fn();
console.log('The previous call ends...');
var fn = function () {
console.log('fn function [expression] declares execution...')
// code..
}
console.log('The call starts after that...');
fn();
console.log('The call starts after that...');
Console printing results:
You can see that when the code is executed for the first time when the fn() function is called, the prompt is: fn is not a function (fn is not a method), and the operation is terminated when it encounters an error.
This shows that when fn() is called for the first time, the var fn variable does not exist as a property of the global object, and the anonymous function context referenced by fn is not initialized, so the call failed before it.
The code copy is as follows:
// Now comment out the previous call logic first, then look at the console output
// console.log('Before the call starts...');
// fn();
// console.log('The previous call ends...');
var fn = function () {
console.log('fn function [expression] declares execution...')
// code..
}
console.log('The call starts after that...');
fn(); // Called after the expression
console.log('The call starts after that...');
Console printing results:
It can be seen that it is OK to call the expression function after it. Let’s summarize why?
Summarize:
1: First of all, the variable itself does not exist as a function, but a reference to an anonymous function (the value type does not belong to a reference)
2: During the code execution stage, when initializing the global context, it does not exist as a global attribute, so it will not cause contamination of variable objects.
3: This type of declaration is generally common in the development of plug-ins, and can also be used as a call to callback functions in closures.
So function fn () {} does not equal var fn = function () {} , they have essential differences.