In-depth understanding Closure Series Third article--iife

xTable of Contents [1] implementation [2] use front words

Strictly speaking, Iife is not a closure because it does not satisfy the three conditions that a function becomes a closure. But in general, people think that Iife is a closure, after all, closures have multiple definitions. This article will describe in detail the implementation and use of Iife

Realize

The function follows a pair of parentheses () to denote a function call

// function declaration statement notation function Test () {};test (); // function Expression notation var function () {};test ();

However, it is sometimes necessary to call the function immediately after defining the function. This function is called an immediate execution function, which is called immediately called function expression Iife (imdiately invoked function expression)

[Note that the]javascript engine stipulates that if the function keyword appears at the beginning of the line, it is interpreted as a function declaration statement

"1" Function declaration statement requires a function name, because there is no function name, so error

// syntaxerror:unexpected token (function() {} ();

The "2" function declaration statement is preceded by a pair of parentheses, just a combination of the function declaration statement and the grouping operator. Because the grouping operator cannot be empty, the error

// syntaxerror:unexpected token) function foo () {} (); // equivalent to function foo () {};(); // syntaxerror:unexpected token)

The "3" function declaration statement with a pair of parenthesized parentheses is only a combination of the function declaration statement and the grouping operator without error.

function foo () {} (1); // equivalent to function foo () {};(1);

So, the solution is not to let function appear at the beginning of the line, so that the engine understands it as an expression

Two of the most common approaches

(function/**  /} ()); (function/** /

Other wording

vari =function(){return10; } ();true&&function(){/*Code*/ }();0,function(){/*Code*/ }();!function(){/*Code*/ }();~function(){/*Code*/ }();-function(){/*Code*/ }();+function(){/*Code*/ }();New function(){/*Code*/ };New function(){/*Code*/}();

Use

Iife is generally used to construct private variables to avoid global space pollution

Next, use a requirement implementation to more visually illustrate the purpose of Iife. Suppose there is a requirement that every time a function is called, a number plus 1 is returned (the initial value of the number is 0)

"1" Global variables

In general, we use global variables to hold this number state

var a = 0; function Add () {    return + +A;} Console.log (Add ()); // 1console.log (Add ()); // 2

"2" Custom properties

But in the above method, the variable A is actually only associated with the Add function, but is declared as a global variable, which is not appropriate.

It is more appropriate to change the variable A to the custom property of the function

function Add () {    return ++ = 0; Console.log (Add ()); // 1console.log (Add ()); // 2

"3" Iife

In fact, this is still a problem. Some code may inadvertently reset the Add.count

Using Iife to save counter variables as private variables is more secure and can also reduce the pollution to the global space

var add = (function() {    var counter = 0;     return function () {        return + +counter;     }}) (); Console.log (Add ())//1console.log (Add ())//2    

In-depth understanding Closure Series Third article--iife