IIFE

IIFE: Immediately Invoked Function Expression, which translates to the Function Expression Invoked Immediately. That is, the function is called as soon as it is declared.

Ordinary function declarations and function calls

function bar() { var a = 10; console.log(a); } bar(); // Function callCopy the code

IIFE function declaration and invocation

(function foo(){ var a = 10; console.log(a); }) ();Copy the code

The first thing to notice is that IIFE functions are expressions that consist of a pair of () enclosing the function declaration. Causes the JS compiler to treat this not as a function declaration, but as an IIFE, which immediately executes the function expression. But both achieve the same goal, declaring a function and then calling that function.

Why use IIFE

It is clear that IIFE offers limited benefits if it is simply to execute a function immediately. In fact, IIFE was created to compensate for the scope deficiency of JS: JS has only global scope, function scope and, starting with ES6, block scope. Compared to other popular object-oriented languages, JS is weak in access control. So how do you achieve scope isolation? In JS, only function can achieve scope isolation, so if you want to isolate the definition of variables, functions, and so on in a piece of code, you can only encapsulate the code in a function.

Achieve scope isolation, name collisions, and reduced memory footprint for functions that are called once.

Block-level scope

There is no concept of block-level scope in ES5. There are only global scopes and function scopes

for(var i = 0; i< 10; i++) { console.log(i); } console.log(i); / / 10Copy the code

The variable I in the for loop is a global variable that can be accessed after the for loop completes. The I’s are not destroyed

Block-level scopes can also be called private scopes. That is, only defined in the block of the for loop. Once the loop ends, the variable I is destroyed, whereas in ES5 we mainly use anonymous functions [IIFE] to achieve block-level scope.

IIFE implements scope isolation
// Function declaration statementfunction test() {};
test(a); // Function expression vartest = function() {};test(a);Copy the code

The javascript engine says that if the function keyword appears at the beginning of the line, it should be interpreted as a function declaration statement. Function declarations cannot be followed by parentheses (anonymous functions are a type of function declaration). However, function expressions can be followed by parentheses. So you can convert function declarations into function expressions. In an immediate function, a variable is defined immediately

So the solution is to keep function off the top of the line and let the engine understand it as the most common way to use an expression

(function(){
    console.log('123'); } ()); (function(){
    console.log('123'); }) (); (function foo(){
    console.log('123'); }) ();Copy the code
A semicolon

For immediately executing the end of a function; The semicolon is best, because if not, you will encounter problems with two IIFE implementations that are both wrapped in parentheses ().

(function(){
    console.log('a'); }) () (function(){
    console.log('b'); }) ()Copy the code

Only A can display this code, and B will report an error

TypeError: (intermediate value)(…) is not a function

Without a semicolon, the above content will be interpreted by JS as:

(function(){
    console.log('a'); }) () (function(){
    console.log('b'); }) ()Copy the code

That is, after the a anonymous function is executed, there is no; After the partition, B immediately executes the function and A synthesizes a function. [root@reutrn] [root@reutrn] [root@reutrn] [root@reutrn]

We can modify it like this

(function(){
    console.log('a'); }) () (function(){
    console.log('b'); } ())Copy the code

After this modification, both A and B will be displayed, but the error will also be reported. There are other modification methods, but I suggest adding; Semicolons avoid errors.

The advantages of IIFE

  • Creating block-level (private) scopes avoids adding variables and functions to the global scope, and thus avoids naming conflicts for global variables and functions in multiplayer development.
  • Any variables and functions defined in IIFE are destroyed at the end of execution, which reduces the memory footprint of closures because there are no references to anonymous functions. As soon as the function completes execution, its scope chain can be destroyed immediately.

Welcome to follow the wechat official account