Detailed explanation of JavaScript anonymous, named functions and immediate execution functions IIFE

The function scope in JavaScript exists to "hide" variables and functions

Conforms to our principle of least privilege
At the same time, another benefit is that it can avoid identifiers with the same name Conflict of symbols
Today we will mainly talk about this immediate execution function
Before this, review anonymous functions and named functions

Anonymous functions and named functions

Whether it is anonymous or anonymous Names are all for function expressions.
Function declarations must have names, otherwise an error will be reported.

function foo(){ //函数声明
    //...}

Here I will explain an Easter egg, maybe you will read my article. When sample code, I always like to use some
Words like fn, func, demo, foo, bar, foobar
fn and func are the abbreviations of function "function"
Demo is the abbreviation of the word demonstration "example"
foo, bar, foobar we can often see in technical books and computer literature
foo is a variant of fu, the abbreviation of fuck-up, meaning "a mess"
bar is "beyond all recognition", which means "beyond cognition". In layman's terms, "can't recognize it, it's a mess"
They are just some placeholders, equivalent to our Xiao Ming Xiao Hong, A, B, Bing and Ding, Zhang San and Li Si...

Function expressions can have names or no names

var foo = function(){...};
console.log(foo.name); //foo
var bar = function foobar(){...};//不要这么写
console.log(bar.name); //foobar

You can see The second way of writing simply changes the name attribute of the function.
It is useless other than that. Let’s not write it like this.

Besides, our most common usage is function expression as Callback parameters
For example, in a timer

setTimeout(function(){
    //...},1000);

Here I wrote an anonymous function expression
It is simple and crude to use
But it has several shortcomings

• There is no function name in the trace stack, making debugging difficult

• If you need to reference yourself, you can only use arguments.callee (disabled in ES5 strict mode)

• Reduced the readability and understandability of the function

When we unbind the event, we also need the function name (if it is not bound directly with onclick, etc. )
So
It is a best practice and a good habit to give a function expression a name

setTimeout(function timerHandler(){
    //...},1000);

Common usage of executing functions immediately

Execute functions immediately, I am used to calling it this
There are also things called self-executing functions, automatic execution functions, etc.
is more standard.
Immediately execute function expressions
Pay attention to my wording, it is a function expression

It It’s not a syntax
, but everyone used it and found that it can be used in this way
So it spread, until now
As the name suggests, the execution flow runs to this function and it is executed immediately
The community gives It specifies the terminology: IIFE (Immediately Invoked Function Expression)

Our common usage is:

(function(){
    //...}());

(function(){
    //...})();

When we use IIFE, we generally use an anonymous function expression Formula
Of course it’s good to add a name, and it also has the advantages of a named function expression
The two usages are completely equivalent, it’s up to you to decide which one to use
But I prefer to write the brackets outside, It feels more comfortable to look at
And I saw that many great masters are like me

Advanced usage of immediate execution function

A slightly more advanced usage is to pass parameters in the immediate execution function
For example, our common method of passing window

var a = '全局';
(function IIFE(global){    var a = '局部';    console.log(a);// "局部"
    console.log(global.a);// "全局"})(window);

What are the benefits of passing window?
Analysis from the perspective of our scope
(You can look at the scope I wrote -> Portal)
The reference of the global object is cached in the local environment
so that we can access it faster Global objects, no need to jump to the top-level scope to search
This small optimization is not the focus
The key point can be optimized when compressing the code
Maybe the above code compression tool can be compressed like this

var a = '全局';
(function IIFE(g){    var a = '局部';    console.log(a);// "局部"
    console.log(g.a);// "全局"})(window);

When the code is very large, don’t underestimate this optimization

Immediately execute function change usage

IIFE has another variant, you must have seen it

(function IIFE(demo){
    demo(window);})(function demo(global){
    //...
});

This mode of putting the function to be run into parameters seems cumbersome
but it is widely used. The overall architecture of frameworks such as jQuery is also very similar to this
If you are used to it, you will feel that it is more traditional than ours The usage is easier to understand

The overall function expression is defined in the second part of IIFE and passed into the first part of IIFE as a parameter
Then the function is called and window is passed in as a parameter

Understanding of immediate execution function

Why can immediate execution function be executed automatically?

(function(){
    //...})();

Whyfunction(){}()Can’t be written like this
Because this is a function declaration, and function declarations cannot be executed
Only expressions To be able to execute

var demo = function(){
    console.log(1);// 1
    return 123;
}();
console.log(demo);// 123

This is an expression, so it can be executed
What the demo gets is the return value of the function
Since the expression can be executed, the following methods can be executed Immediate execution

+function(){
    console.log(1);// 1}();
-function(){
    console.log(2);// 2}();
!function(){
    console.log(3);// 3}()
,function(){
    console.log(4);// 4}();

You can see that even commas can be turned into function expressions, and then executed immediately
But we must not write like this
If the function has a return value, it may Produces unexpected side effects
and is not readable

Summary

• Function declarations must have names

• Named function expressions are a best practice

• Immediately execute function expression usage: (function(){}()); (function(){})();

• Immediately execute the function and pass the window parameter to optimize the window speed in the scope chain, which is beneficial to compressing the code

• Only expressions can be executed

The above is the detailed explanation of JavaScript anonymous, named functions and immediate execution functions IIFE, more related Please pay attention to the PHP Chinese website (www.php.cn) for content!