定义:声明一个匿名函数,并立即执行这个匿名函数

匿名函数声明
语法:function(){}

立即执行函数写法

(function(){alert("我是立即执行函数");}()); //最前最后加上括号
(function(){alert("我是立即执行函数");})(); //function前后加括号再调用
/*在函数前加运算符,当然这里主要是为了通过语法验证,介绍下这样的方法也可以,常用的有加!和void*/
!function () {alert("我是匿名函数")}()  
+function () {alert("我是匿名函数")}() 
-function () {alert("我是匿名函数")}() 
~function () {alert("我是匿名函数")}() 
void function () {alert("我是匿名函数")}() 
new function () {alert("我是匿名函数")}() 
var result=function(){alert("我是匿名函数");}();//赋值运算符
//当然最安全的函式加括号的形式,因为有些运算符还会和函数的返回值进行运算,有时造成不必要的麻烦。

立即执行函数的参数
可以给立即执行函数传递参数,例如

(function(a,b)
{console.log(a+b);}
(m,n));
//立即执行函数若中需要全局变量,全局变量会可以作为参数传递给立即执行函数

立即执行函数返回值
像其他函数一样,立即执行函数也可以有返回值。除了可以返回基本类型值以外,立即执行函数也能返回任何类型的值,比如对象,函数。

var result=(function(){
   var sum=2+3;
   return function(){
      return sum;
 }
})();
cosole.log(result());//5

立即执行函数作用

1. 避免污染全局,首先不必为函数命名,避免污染了全局变量,你定义的所有变量都会成为立即执行函数的局部变量
IIFE.png
如上图的代码,这些变量如果写在外面就成了全局变量就会造成全局的污染,所以用立即执行函数之后,这些变量都不会在全局变量中存在,以后也不会其他地方使用,有效的避免了污染全局变量。当然也可以返回一个在全局中需要的变量(使用return来返回)。

2. 立即执行函数内部形成了一个单独的作用域,可以封装一些外部无法读取的私有变量

3. 可以将这些代码封装进一个立即执行函数中,并且确保页面没有它的情况下也能正常工作。
当然还有其他的使用方法,现在就浅谈至此。

立即执行函数函数的一个实际用法

<body>
    <ul id="list">
        <li>公司简介</li>
        <li>联系我们</li>
        <li>营销网络</li>
    </ul>
    <script>
       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
        }
      }
     </script>  
</body>

如果按照上述这样写的话,结果永远都是3,因为用户触发点击时,循环已经执行完毕了,所以i已经是3了,i是贯穿整个作用域的,而不是给每一个li分配一个i,点击事件是异步。

这时我们可以使用立即执行函数来解决这个问题
利用立即执行函数,给每个li创建一个独立的作用域,在立即执行函数执行的时候,i的值从0到2,对应三个立即执行函数,这3个立即执行函数里边的j分别是0,1,2所以就能正常输出了,看下边例子:

<body>
    <ul id="list">
        <li>公司简介</li>
        <li>联系我们</li>
        <li>营销网络</li>
    </ul>
    <script>
       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);
          })(i); 把实参i赋值给形参j
        }
      }
     </script>  
</body>

关于立即执行函数的理解和用法当然还有很多的,这里只是一个初步的介绍,后续随着不断学习会不断扩充。

这篇文章主要借鉴了简书的一位作者的理解大佬传送门

Last modification:April 5, 2020
如果觉得我的文章对你有用,请随意赞赏