Understanding about immediate function execution in JavaScript

Understanding about immediate function execution in JavaScript
Understanding about immediate function execution in JavaScript

The two common writing formats for immediate function execution in JavaScript are:

① (Function (){...})();

② (Function (){...}());

The difference between the two is that the former two '()' are relatively independent, and the latter two '()' are nested. Looking at the jQuery source code, we can see that jQuery adopts the second format. The difference in format does not indicate anything. It is just a habit of writing! You don't have to worry too much about it. Next, let's look at some more in-depth things to help us understand JavaScript's immediate function execution.

Insert: Declaration of functions in JavaScript

Functions in JavaScript can be defined in the following three ways:

① Function Declaration: function func (parameters ){...};

② Function expression: var func = function (parameters ){...};

③ Anonymous function: function (parameters) {...}; // an anonymous function is also called the lambda function.

Strictly speaking, anonymous functions also fall into the category of function expressions. That is, the two methods defined by functions in JavaScript are: function declaration and function expression;

To understand the differences between the two, we should start with the mechanism of the JavaScript interpreter (execution engine.

A major feature of function declaration is function declaration hoisting, which means that the interpreter reads the name of the function before executing the function code. This means that even if we call this function before the function declaration, no error will be reported. For example:

Func (); // The function func () {// function declaration is not reported here. The JavaScript execution engine reads the function name first during code compilation, and saved in the current execution environment (scope chain) console. log ('function declaration... ');}

For function expressions, we can regard them as variable declarations. We declared an anonymous function and assigned the anonymous function to a variable. All variables in JavaScript must be assigned a value before use! Function expressions must also be assigned values before use. For example:

Func (); // error TypeError: undefined is not a functionvar func = function () {// function expression console. log ('function expression ,,,');}

In this way, no error will be reported:

Var func = function () {alert () ;}; func (); // assign a value first and then use

 

 

About how to execute the function immediately after inserting so many JavaScript statements about the function, let's start to explain the issue about executing the function immediately.

 

As mentioned above, functions in JavaScript mainly have two types of definitions: function declaration and function expression, and some differences between them are mentioned. Apart from the differences mentioned above, the main differences between them are the differences in the immediate execution of functions:You can call the function immediately by adding parentheses after the function expression, but the function declaration is not allowed. The function declaration can only be called in the way that the function name is followed '()'.;

 

/* Function declaration */function func () {alert ('function');} func (); function func1 () {// error: 'syntaxerror: Unexpected token) 'syntax-Level Error alert ('function1') ;}();/* function expression */var func2 = function () {// The function expression is called immediately after brackets are added to the function body. The value of func2 is not the Function address, but 1 return 1;} (); console. log (func2); // The output result is 1func2 (); // error TypeError: number is not a function

 

To further understand how to execute functions immediately, let's do a few interesting experiments:

 

(Function (param) {console. log (param); // output 123, using the () operator}) (123); (function (param) {console. log (param); // output 1234, using the () operator} (1234 ));! Function (param) {console. log (param); // output 12345, use! Operator }( 12345); + function (param) {console. log (param); // output 123456, using the + operator} (123456);-function (param) {console. log (param); // output 1234567, using the-operator} (1234567); var func = function (param) {console. log (param); // output 12345678, use = Operator} (12345678)

Through the experiment results, we can draw the following conclusions:

 

Add '! ',' + ','-', And even', 'can all be executed immediately after function definition, while '()','! Operators such as ',' + ','-', and' = 'convert function declarations into function expressions, eliminating the ambiguity of the javascript engine in identifying function expressions and function declarations, tell the javascript engine that this is a function expression, not a function declaration. You can add brackets behind it and immediately execute the code of the function. Brackets are the safest method, because! , +,-, And so on are all operators, which perform operations with the return values of functions, sometimes causing unnecessary trouble.

Use of immediate function execution

In actual development, we use many function expressions. Apart from defining functions, we also use and implement some special requirements. For example, JavaScript does not declare private variables, for constants and other keywords, we can use the immediate execution function to simulate these specific requirements, control the scope of the variable, and so on.