The front end of the interview immediately execute the function

What is immediately execute the function

Declare a function, and immediately call this anonymous function is called to perform the function immediately. After a well-defined function, direct execution.

(function() {alert('立即执行函数')})() 

By declaring a function, use parentheses wrap, this function is called.

Execution of the function immediately wording

Sometimes, after we define the function, the function is called immediately, this time can not be directly added in parentheses after the function definition, which produces a syntax error. The reason is a syntax error, function keyword, either as a statement, can also be used as an expression.

//语句
function fn() {};

//表达式
var fn = function(){};

States: If the function appear at the beginning, will be resolved to the statement. The first line is the function keyword, this section is a function definition, it should not end with parentheses, so the error. When the function not to appear at the beginning, this will be understood as an expression, the simplest approach is to put a parenthesis.

(function() {
    ...
}())

(function() {
    ...
})()

Start with parentheses, this will be understood as an expression, rather than a function definition statement, so errors are avoided, which is called "immediate execution of the function."
Other wording:

(function() {alert('匿名函数')}())  //用括号将整个表达式包起来
(function() {alert('匿名函数')})()  //用括号将函数包起来
!function() {alert('匿名函数')}()   
+function() {alert('匿名函数')}()
-function() {alert('匿名函数')}()
~function() {alert('匿名函数')}()
void function() {alert('匿名函数')}()
new function() {alert('匿名函数')}()

Execution function returns immediately

1, do not have a function name, to avoid the contamination of global variables.

2, the internal functions performed immediately form a single scope, some of the private variable outside the package can not be read.

3, the package variables.

Interview questions

var list = document.getElementById("list");
var li = list.children;
for(var i = 0 ;i<li.length;i++){
  li[i].onclick=function(){
    alert(i);  // 结果总是3.而不是0，1，2
    }
}

Because i was throughout the scope, rather than to each assignment a li i, the click event asynchronous user must be done in the future to run for only clicks, this time i have become 3 a.

Solution:

1, immediately execute the function, creates a scope for each independent Li , at the time of execution of the function is executed immediately, the value of i from 0 to 2, corresponding to the three functions performed immediately, it can normally output.

var list = document.getElementById("list");
    var li = list.children;
    for(var i = 0 ;i<li.length;i++){
      (function(j) {li[j].onclick=function(){
        alert(j);  // 结果是0，1，2
      }})(i)
    }

2, the use of block-level scope ES6 :

var list = document.getElementById("list");
var li = list.children;
for(let i = 0 ;i<li.length;i++){
  li[i].onclick=function(){
    alert(i);  // 结果总是3.而不是0，1，2
    }
}

Performed using the function of the scene immediately

1, the code after the page has finished loading, you have to do some setup work, such as processor time, create objects, and so on.

2, all of these actions need to be performed only once, for example, only need to show an event.

3, the code is wrapped in its local scope, will not allow any variable leak into global variables.

Immediately execute the function argument

(function(i) {
    ...
})(j)

If immediate execution requires global variables, global variables are passed as a parameter to a function now performed functions. J represents an argument is, i is the parameter representative of the execution of the function.

Execution function returns immediately

1, change the scope of a variable (create an independent scope).

2, the package temporary variable.