立即执行函数

Posted punisher999

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了立即执行函数相关的知识,希望对你有一定的参考价值。

一:什么是立即执行函数?

声明一个函数,并马上调用这个匿名函数就叫做立即执行函数;也可以说立即执行函数是一种语法,让你的函数在定义以后立即执行;

   //(function (){}()) w3c标准
        //(function (){})()
        //只有表达式才被执行符号执行
        //+ function (){
        //    console.log(‘a‘)
        //}();  立即执行函数的方法还有一些
        (function (){
            console.log(‘a‘)
        }()) //我的理解就是 :立即执行函数后函数被清除 

二:立即执行函数的写法:

有时,我们定义函数之后,立即调用该函数,这时不能在函数的定义后面直接加圆括号,这会产生语法错误。产生语法错误的原因是,function 这个关键字,既可以当做语句,也可以当做表达式,比如下边:

//语句
function fn() {};

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

为了避免解析上的歧义,JS引擎规定,如果function出现在行首,一律解析成语句。因此JS引擎看到行首是function关键字以后,认为这一段都是函数定义,不应该以原括号结尾,所以就报错了。
解决方法就是不要让function出现在行首,让JS引擎将其理解为一个表达式,最简单的处理就是将其放在一个圆括号里,比如下边

(function(){
//code
}())

(function (){
//code
})()

 

上边的两种写法,都是以圆括号开头,引擎会意味后面跟的是表达式,而不是一个函数定义语句,所以就避免了错误,这就叫做"立即调用的函数表达式"。
立即执行函数,还有一些其他的写法(加一些小东西,不让解析成语句就可以),比如下边:

(function () {alert("我是匿名函数")}())   //用括号把整个表达式包起来
(function () {alert("我是匿名函数")})()  //用括号把函数包起来
!function () {alert("我是匿名函数")}()  //求反,我们不在意值是多少,只想通过语法检查
+function () {alert("我是匿名函数")}() 
-function () {alert("我是匿名函数")}() 
~function () {alert("我是匿名函数")}() 
void function () {alert("我是匿名函数")}() 
new function () {alert("我是匿名函数")}() 

 

三:立即执行函数的作用:

  1. 不必为函数命名,避免了污染全局变量
  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>  
  
<script>
        function a(a,s,d){
            console.log(z+s+d);
        }
        (1,2,3);//即不报错也不输出
    </script>
</body>

 

为什么alert总是3? 因为i是贯穿整个作用域的,而不是给每一个li分配一个i,点击事件使异步,用户一定是在for运行完了以后,才点击,此时i已经变成3了。
那么怎么解决这个问题呢,可以用立即执行函数,给每个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>
未完待更...

以上是关于立即执行函数的主要内容,如果未能解决你的问题,请参考以下文章

深入理解javascript中的立即执行函数(function(){…})()

立即执行函数—匿名函数

javascript中的立即执行函数(function(){…})()

javascript立即执行函数表达式(IIFE)

js立即执行函数

php 一个自定义的try..catch包装器代码片段,用于执行模型函数,使其成为一个单行函数调用