Detailed explanation of js anonymous self-executing function examples

Anonymous self-executing function: a function without a method name, closure: a closure refers to a function that has the right to access another function scope variable; this article mainly shares with you a detailed explanation of js anonymous self-executing function examples, hoping to help Everyone.

Explain through an example:

I found a case from the Internet, using a for loop, anonymous self-executing function, and setTimeout.

Case 1:

var value1 =0,value2=0,value3=0;for(var i =1;i<=2;i++){  var i2 = i;  console.log(&#39;i2==>&#39;,i2);
  (function(){    var i3 = i;    console.log(&#39;i3==>&#39;,i3);
    setTimeout(function(){      console.log(&#39;i==>&#39;,i);      console.log(&#39;i2==>&#39;,i2);      console.log(&#39;i3==>&#39;,i3);
      value1 +=i;
      value2 +=i2;
      value3 +=i3;
    },1);
  })();
}

setTimeout(function(){  console.log(value1,value2,value3);
},100)

//输出结果i2==> 1i3==> 1i2==> 2i3==> 2i==> 3i2==> 2i3==> 1i==> 3i2==> 2i3==> 26 4 3

Explanation:

1. Several syntaxes of anonymous self-executing functions

(function () { /* code */ } ()); // 推荐(function () { /* code */ })(); 
~function () { /* code */ }(); 
+function () { /* code */ }(); 
!function () { /* code */ }(); 
void function () { /* code */ }();

2. Using self-executing functions and closures To save the value in a special state

(function(){//自执行函数
    var i3 = i;    console.log('i3==>',i3);
    setTimeout(function(){//闭包
      console.log('i==>',i);      console.log('i2==>',i2);      console.log('i3==>',i3);
      value1 +=i;
      value2 +=i2;
      value3 +=i3;
    },1);
  })();

The variables in the self-executing function will be called in the closure. According to the characteristics of the closure, the different values ​​​​of each loop in the for loop will be passed into the closure;

3.For loop syntax understanding

for (语句 1; 语句 2; 语句 3) {
 ...
}

Statement 1 is executed before the loop (code block) starts
Statement 2 defines the conditions for running the loop (code block)
Statement 3 is executed after the loop (code block) has been executed

Analyzed through the following case:

for(var i=1;i<3;i++){  console.log(i);
  setTimeout(function(){    console.log(&#39;i===>&#39;,i);
  },100);
}//输出12i===> 3i===> 3

When the for loop is executed, i++ will be executed after the code in the for statement ends , and setTimeout is executed asynchronously, so the i output in setTimeout is actually the value of i ++ again after the last loop ends.

Explanation of Case 1:

Everyone should understand after seeing this. In Case 1, during the first loop, i2 = 1, and i3 = 1 in the self-executing function, but the closure can Save values ​​in different states. Therefore, only i3, the value passed to setTimeout at this time, is saved in the cache. i2 and i will be overwritten by the second cycle. At this time, setTimeout is not executed;
When the second time When looping, i2=2;i3=2; Similarly, i3=2 is also saved in the closure, and i2 is overwritten;
At this time, the for loop execution ends, and the setTimeout function begins to be executed. At this time, the for loop ends , and the last statement "i++" is executed, so it is 3 at this time, not 2; and i2 outside the closure does not save different states in the closure and can only be overwritten, while i3 in the closure Each value will be cached in memory by the closure to retain the state, so the values ​​in setTimeout are all 3, i2 is 2, and i3 is the value of each cycle;

Benefits at the end of the article:

Benefit 1: A comprehensive collection of front-end, Java, product manager, WeChat applet, Python and other resources: https://www.jianshu.com/p/e8197d4d9880
Benefit 2: Getting started with WeChat applet A full set of detailed video tutorials with actual combat: https://www.jianshu.com/p/e8197d4d9880

##Related recommendations:

Detailed explanation of JavaScript self-executing functions and jQuery extension methods

JavaScript self-executing functions and jQuery extension methods

Self-executing functions in js functions

The above is the detailed content of Detailed explanation of js anonymous self-executing function examples. For more information, please follow other related articles on the PHP Chinese website!