立即执行函数(IIFE)&&闭包

1,910 阅读1分钟
1. function invoke () {
    return function () { //return返回0到invoke(),invoke()在进行调用
        alert(0)
    }
}
invoke()();//或者!invoke()();

2. (function () {
    return alert(1)
})();

3. (function () {
    alert(3);
}());

// 括号和JS的一些操作符(如 = && || ,等)可以在函数表达式和函数声明上消除歧义
// 如下代码中,解析器已经知道一个是表达式了,于是也会把另一个默认为表达式
4. var iife = function () {
    alert('IIFE')
}();

5. true && function(){
alert(2)
}();

6. !function(){ /* code */ }();
 ~function(){ /* code */ }();
 -function(){ /* code */ }();
 +function(){ /* code */ }();
 
 7. new function () {}
    new function () {} () //带参数
    
    写法五花八门,不胜枚举...
  1. 再来瞧瞧IIFE与闭包的暖味关系:立即执行函数能配合闭包保存状态。
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
var p = document.getElementsByTagName('p');
for (var i = 0; i < p.length; i++) {    
    p[i].onclick = function () {
   alert('我是第' + i + '个')//输出4
    }
}

为什么输出4,因为:代码预先解析,点击任意一个p执行onclick,已经达到了最后一个p,没有将点击每个p的过程值保存住,所以输出4

要想点击每个p出现对应的索引值,就得将i保存到函数内存中 如下:利用IIFE存状态

for (var i = 0; i < p.length; i++) {
    p[i].onclick = new function (oldi) {
    return function () {
     alert('我是第' + oldi + '个');    
    }
    }(i)
}
//更直观,可读性的美化下...
for (var i = 0; i < p.length; i++) {
    new function (oldi) {
    p[i].onclick = function () {
   alert('我是第' + oldi + '个');
    }
    }(i) //即时调用存贮i
}

9.IIFE在js模块化中的作用: 用立即执行函数处理模块化可以减少全局变量造成的空间污染,构造更多的私有变量。

var mo = (function (m) {
var moa = 0;
return {
    set:function () {return alert(moa);},
    get:function (i) {return alert(2 * i)},
    sgt:function (n) {return alert(n * m);}
}
})(22);
mo.set();//0
mo.get(1);//2
mo.sgt(33);//726




    <div id="oop">
        <div>111</div>
        <div>222</div>
        <div>3333</div>
        <div>4444</div>
    </div>
    <script>
        var oopChid = document.getElementById('oop').childNodes;
        for (var i = 0; i < oopChid.length; i++) {
            new function (i) {
                oopChid[i].onclick = function () {
                    mkl();
                };
                function mkl() {
                    function hh() {
                        console.log(999);
                        function retru() {
                            var a = 0;
                            b = 9;
                            return new Array(a, b);
                        }
                        var mmm = function () {
                            return function you2() {
                                var ii = retru();
                                console.log(ii[0]);
                            }
                        }
                        var uop = function () {
                            ikop();
                            function ikop() {
                                let you2t = mmm();
                                you2t();
                            }
                        }
                        uop();
                      function jk () {
                            var kkk = 0;
                            return new Array(kkk);
                        }
                    }
                    hh();


                    var lll = function () {
                        let mop = hh(); mop();
                        console.log(mop[2]);
                    }
                    lll();
                }
            }(i);
        }
        
        
        最粗暴的闭包:
         function name(params) {
          function name1(params) {
              return a = 1;
              var b = 3
          }
          return name1
      }
      var o = name();
     
     console.log( o())  //得到1   外部引用函数内部的变量