天天看點

IIFE

一、IIFE

IIFE:immediately-invoked function expression,即時調用函數表達式。

 如果一個函數,在定義的時候,就想直接調用它,就是一個IIFE。

 函數執行方法:在函數名或變量名後面加()運算符。

 函數關鍵字形式,定義時直接在後面加()執行。

function fun(){
   console.log(1);
}();      
IIFE
var fun = function(){
   console.log(1);
}();      
IIFE

函數表達式形式:能立即執行,函數在指派給變量的時候就已經被矮化成表達式,可以直接在後面加小括号執行。

結論:如果函數能矮化其表達式,就能夠在定義時直接調用,就能實作IIFE。

函數矮化為表達式的方法:在函數定義之前加運算符。

數學運算符中:+  - ()符号,其他不能用。

邏輯運算符中:!

注意:也可以不寫函數名

//用運算符将函數矮化為表達式
+function fun(){
   console.log('哈哈');
}();

-function fun(){
   console.log('哈哈');
}();

 !function fun(){
   console.log('哈哈');
 }();

 (function fun(){
  console.log('哈哈1');
 })();      

IIFE還可以進行函數傳參,IIFE能夠關住函數的作用域。在使用某個變量時,如果變量定義在函數之内,或者函數的參數,隻會使用立即調用時的變量值,不會對别人造成影響。

(function fun(a){
   console.log(a);
})(8);
fun(5);   //IIFE關住fun的作用,外面找不到fun的定義      
IIFE

IIFE可以不寫函數名,寫匿名函數;IIFE關住函數的作用域,可以用于解決函數閉包帶來的錯誤影響。

最标準常用的IIFE格式:是以IIFE裡面的函數,都是匿名函數。

(function(a){
 console.log(a);
})(8);      

二、結合數組觀察閉包

<script type="text/javascript">
         var arr=[]; //定義空數組接收
       for(var i=0; i<=10; i++){
           // 函數定義時作用域是全局的,全局中有一個變量 ;
           //函數隻是定義給每一項,并不會立即執行
           //函數這個閉包,記住了全局作用域,裡面有個i,記住了自己内部的語句
           console.log(i);
           arr[i]=function(){
            console.log(i);
           }
         }
    console.log(arr); //循環結束後全局變量i的值已經變為11; 如果在全局範圍内查找i時,用的值就是11
    //循環結束後,
    console.log(i);
    console.log(arr[0]()); //相當于函數内部的console.log(i)執行了一次
    console.log(arr[1]());//相當于函數内部的console.log(i)執行了一次
    console.log(arr[2]()); //相當于函數内部的console.log(i)執行了一次
  </script>      

輸出的結果

IIFE

要想實作循環中的i與其下标索引相等,用IIFE()來解決

<script type="text/javascript">
         var arr=[];
         for(var i=0; i<=10; i++){
           (function (a){
            //每次i傳進來時,IIFE立即執行
            //執行時,每次a的值就是一個确定的i
            arr[a]=function(){
                console.log(a);
            }
           })(i);
         }
         console.log(arr);
         console.log(arr[0]());
         console.log(arr[1]());
         console.log(arr[3]());
    </script>      
IIFE

轉載于:https://www.cnblogs.com/smivico/p/7762724.html

繼續閱讀