立即執行函式（IIFE）&&閉包

火雲邪神發表於2018-04-11
函式
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);
        }
複製程式碼

相關文章