“This is the first day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

preface

  1. background

Function (){function(){function(){function(){function(){function(){… })(), as shown below

Function (){… } (){/ / function(mounted){/ / function(mounted){/ / function(mounted){/ / function(mounted){/ / function(mounted){/ / function(mounted){/ / } function(){function(){function(){function(){function(){… } () come into my sight.

For example, axios looks like this (function(){… }) () forms

Leaflet is:

There are! Function begins with:

Function (){function(){… }) ()

Start, execute the function immediately

(function(){… })() is a common javascript way of immediately executing functions, and it has a cousin :(function(){… } ())

It’s easy to confuse the two forms of an immediate function for the first time, just look at the ‘(‘, its other half ‘)’ before the function keyword. Is it at the end or not at the end? Look at the picture below.

When I talk about instant function, I’m going to have to talk about this function, what is it? Function:

  • Function declaration (can be promoted)
  • Anonymous functions
  • Function expression (cannot be promoted, but the expression can be followed by parentheses to indicate that the function is called immediately)

Function declaration:

function fnName () {... };Copy the code

Use the function keyword to declare a function and specify a function name, argument list, and method body.

Anonymous functions:

function () {... };Copy the code

Use the function keyword to declare a function without giving it a name, so it is called an anonymous function. Anonymous functions are function expressions. Anonymous functions have many uses, such as creating a function by giving a variable, creating an event handler or creating a closure by giving an event.

Function expression:

var fnName = function () {... };Copy the code

The most common form of function expression syntax is to declare a function without naming it, and finally to assign an anonymous function to a variable called a function expression.

Understand the immediate execution of functions

Execute the function immediately, literally, execute the function immediately

It is divided into

  1. Function declarationType function execution
  2. Anonymous functionsType function execution
  • Function declarationType function execution
fnName(); 
function fnName(){... }// Normal, since the function declaration is "promoted", the function call can precede the function declaration

fnName(); 
var fnName=function(){... }FnName does not save a reference to a function. The function call must follow the function expression
Copy the code

Explanation:

Functions in JS declare the concept of promotion

  • As the Javascript engine interprets Javascript code, Function declaration promotion will occur in the current execution environment (scope), whereas the Function expression must wait until the Javascirtp engine executes to its row. Parse function expressions line by line from top to bottom.

  • Function expressions can be immediately called with parentheses behind them. Function declarations cannot. Only fnName() can be called.

So the code above will execute the result in the comment. If we look at the actual result of the console execution, we can also see:

  • Anonymous functionsType function execution
// The first case
(function(a){ 
    console.log(a); // Chrome prints 123. Use the () operator to print a console example. See the image below}) (123); 

// The second case
(function(a){ 
    console.log(a); // Chrome prints 123. Use the () operator to print a console example. See the image below} (123));

// The third case
!function(a){ 
    console.log(a); // Chrome output 123, use! Operator concrete console print example, see the image below} (123); 
// The fourth case
+function(a){ 
    console.log(a); // Chrome prints 123. Use the + operator to print a console example. See the image below} (123); 
// The fifth case
-function(a){ 
    console.log(a); // Chrome prints 123. Use the - operator to print an example of concrete console. See the image below} (123); 

var fn=function(a){ 
    console.log(a); // Chrome prints 123, using the = operator for a console print example, see the image below} (123)
Copy the code

Looking at the output, you can see:

Add! Before function! , +, -. Can be executed immediately after a function is defined, while (),! The operators, +, -, =, and so on, all convert function declarations into function expressions, disambiguating the javascript engine’s recognition of function expressions and function declarations, telling the javascript engine that this is a function expression, not a function declaration, and that it can be followed by parentheses, and immediately execute the function code.

Parentheses are the safest thing to do because! The, +, and – operators also operate on the return value of a function, sometimes causing unnecessary trouble.