(function() { … }) ();
(function() { … } ());
Both of these are common ways to write JS functions that execute immediately.
Use the function keyword to declare a function and specify a function name, called the function declaration.
function fnName() { … }; Function expressions use the function keyword to declare a function without giving it a name, and finally assign an anonymous function to a variable called a function expression. This is the most common form of functional expression syntax.
var fnName = function() { … }; Anonymous functions use the function keyword to declare a function without giving it a name, so they are called anonymous. Anonymous functions are also function expressions. Anonymous functions can be used for many purposes, such as creating a function by giving a variable, creating an event handler or creating a closure by giving an event.
function() { … }; In the case of Function declarations and Function expressions, the JS engine will ‘Function declaration promote’ Function declarations in the current execution environment (scope) when parsing code. Function expressions, on the other hand, cannot be parsed line by line from top to bottom until the JS engine executes on their row. A function expression can be immediately called with parentheses; Function declarations cannot be called, only as fnName(). Such as:
fnName(); function fnName() { … } // Normal, since the function declaration is’ promoted ‘, the function call can precede the function declaration
fnName(); var fnName = function() { … } // the variable fnName does not save a reference to the function, the function call must be after the function expression 2.
var fnName = function() { alert(‘Hello World’); } (); Function fnName() {alert(‘Hello World’); function fnName() {alert(‘Hello World’); } (); Function () {console.log(‘Hello World’); function() {console.log(‘Hello World’); } (); / / syntax errors, although the anonymous function belongs to the function expression, but not for assignment operation, / / so JS engine will be the beginning of the function keyword as a function declaration, an error: request need a function name So, if you want to add parentheses immediately behind the body of the function call, this function must be function expression, can’t be a function declaration.
Otherwise, add ‘! ‘before function. ‘,’ +’,’ -‘,’,’ and so on can be executed immediately after a function is defined. Because they can convert function declarations into function expressions.
Such as:
(function(a){ console.log(a); //1, use () operator}(1));
! function(a){ console.log(a); / / 1, the use of! Operator} (1);
+function(a){ console.log(a); //1, use the + operator}(1);
-function(a){ console.log(a); //1, use the – operator}(1); Role in JS without the concept of the private scope, if in many development projects, you are global or local scope statement some variables, may be others accidentally variables with the same name to override, at this moment, can imitate a private scope, use anonymous functions as a container, internal can access external variables, The external environment has no access to its internal variables, so internally defined variables do not conflict with external variables, commonly known as “anonymous wrappers” or “namespaces”.
Function (window,undefined){function (window,undefined){… Jquery code… } (window), you can protect JQuery internal variables when calling JQuery code in a global scope.
An immediate function expression can be used to block function values and effectively store state.
Take a chestnut 1 2 3 var elems = document. GetElementsByTagName (‘ a ‘);
for ( var i = 0; i < elems.length; i++ ) {
elems[ i ].addEventListener( ‘click’, function(e){ e.preventDefault(); alert( ‘I am link #’ + i ); }, ‘false’ );
} Whether you clicked 1, 2, or 3, the result of alert is I am link #3
Because the value of I is not locked. Instead, when each link is clicked (the loop has ended), the total number of elements is displayed, because that is the actual value of I when clicked.
var elems = document.getElementsByTagName( ‘a’ );
for ( var i = 0; i < elems.length; i++ ) {
(function( lockedInIndex ){ elems[ i ].addEventListener( ‘click’, function(e){ e.preventDefault(); alert( ‘I am link #’ + lockedInIndex ); }, ‘false’ );
})( i );
} alert:0, 1, 2. Because in IIFE, the value of I is locked as the lockedInIndex. At the end of the loop, although the value of I is the total number of elements, the value of lockedInIndex in IIFE is the value of (I) passed in when the function expression is called. So when the link is clicked, the correct value is displayed.
Var arr = []; var arr = []; for(var i=0; i<3; i++) { arr[i] = function() { return i; }; } console.log(arr0); // 3 console.log(arr1); // 3 console.log(arr2); // 3 Since ES5 has no block scope, the variable I defined in the for loop condition is actually a global variable, and the I is overwritten as the for executes. Until its value is 3, when the page is loaded and arr0 is executed, arr0’s I will look for the final result of I, so the final print is 3, 3, 3.
This can be solved using the IIFE+ closure:
var arr = []; for (var i=0; i<3; IIFE (function (I){arr[I] = function () {return I; }; })(i); } console.log(arr0); // 0 console.log(arr1); // 1 console.log(arr2); // 2 since IIFE is executed immediately, the specific value of I is written into arr0, and the final printed result is: 0,1,2
In ES6 there is a block scope:
var arr = []; for (let i=0; i<3; i++){ arr[i] = function () { return i; }; } console.log(arr0); // 0 console.log(arr1); // 1 console.log(arr2); // 2 Because of the block scope added by ES6 syntax, the value of the for loop is no longer overwritten as the loop executes. Instead, the value of I is stored separately for each loop.
Closures need to meet the following criteria:
Access the scope; Function nesting; Called outside of its scope as follows:
function makeAddThree() { var starter = 3; return function add(num) { return starter + num; }}
const addThree = makeAddThree(); console.log(addThree(6)); // 9 So IIFE is not a closure because these three conditions are not met.