Detailed explanation of the declaration of function objects in javaScript_javascript skills

Reason for writing: 　

Usually when writing functions in js, we usually declare a function in the conventional way of function fn () {}. When reading some excellent plug-ins, we inevitably see var fn = function () {}. What are the differences between the creation of these functions? Today, in the spirit of breaking the casserole and asking the question, let’s talk about this fascinating function declaration.

Function declaration

Function declaration sample code

Copy code The code is as follows:

function fn () {
console.log('fn function execution..');
// code..
}

In this way, we have declared a function named fn. Here is a thought. Do you think it will be executed if you call it on top of this function? Or will an error be reported?

fn(); // Call the fn function we declared before

Copy code The code is as follows:

function fn () {
console.log('fn function execution..');
// code..
}

Console output:

Yes, the fn function can be called at this time. Here is a summary of the reasons.

Summary:

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

　2: This method is function declaration, which is created when entering the global context stage. They are already available during the code execution stage. ps: javaScript will initialize the context environment (from global → local) every time it enters a method

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

Function expression

Function expression example code

Copy code The code is as follows:

var fn = function () {
console.log('fn function [expression] statement execution..')
// code..
}

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

Call the function declared by the expression once again above and below to see the output on the console.

Copy code The code is as follows:

// In order to clearly see the console output, we make a mark before and after each call to increase readability.
console.log('Previous call started..');
fn();
console.log('Previous call ended..');
var fn = function () {
console.log('fn function [expression] statement execution..')
// code..
}
console.log('After the call starts..');
fn();
console.log('After the call starts..');

Console print result:

You can see that when the code is executed and the fn() function is called for the first time, it prompts: fn is not a function (fn is not a method), and the operation is terminated when an error is encountered.

This shows 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 has not been initialized, so the previous call failed.

Copy code The code is as follows:

// Now comment out the previous calling logic, and then look at the console output
// console.log('Previous call started..');
// fn();
// console.log('Previous call ended..');
var fn = function () {
console.log('fn function [expression] declares execution..')
// code..
}
console.log('The call starts later..');
fn(); // Called after the expression
console.log('The call starts later..');

Console print result:

It can be seen that it is possible to call after the expression function. Let’s summarize why?

Summary:

1: First of all, the variable itself does not exist as a function, but a reference to an anonymous function (value types are not references)

2: During the code execution phase, when the global context is initialized, it does not exist as a global attribute, so it will not cause pollution of variable objects

3: This type of declaration is generally common in plug-in development, and can also be used as a call to a callback function in a closure

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