JS小知識——當即執行函數

當即執行函數有哪些？

在JavaScript中，通常狀況下定義一個函數須要給這個函數命名，或者建立一個變量接受一個函數，以方便以後調用。若是咱們不須要一個命名的函數，那麼一般會使用當即執行函數（IIFE）來解決咱們的問題，同時，當即執行函數有時候能夠幫咱們解決某些閉包問題。

例如

function test(){
    var arr = [];
    for(var i=0;i<5;i++){
        arr[i] = function(){
           console.log(i);       
        }                                        
    } 
    return arr;
} //test()執行後返回一個數組，每一項爲一個函數
複製代碼

test().forEach((item)=>{
	item()
})  // 輸出 5 5 5 5 5
複製代碼

若是咱們想要讓test執行後的數組每一項返回對應的i值，能夠經過當即執行函數解決

function test(){
    var arr = [];
    for(var i=0;i<5;i++){
        (function(i){
            arr[i] = function(){
               console.log(i)       
            }                                      
        })(i)
    }
    return arr;
}
複製代碼

test().forEach((item)=>{
	item()
}) //輸出0 1 2 3 4
複製代碼

這是當即執行函數的一個應用，能夠幫助咱們解決部分閉包問題，還有不少用途，好比避免變量污染，隔離做用域。最著名的仍是jQuery的應用了。那麼當即執行函數有多少種寫法呢？

常見兩種形式

經過( )包裹函數體在經過( )執行函數

1. (function(){console.log(1)}())
2. (function(){console.log(2)})()

這兩種方式等價，經過把匿名函數體變成表達式後自執行。

經過位運算符

3. ~function(){console.log(3)}()
4. -function(){console.log(4)}()
5. +function(){console.log(5)}()
6. !function(){console.log(6)}()

這四種方式經過位運算符把函數體變成表達式以後執行會致使返回的結果發生不一樣。而且壓縮代碼後產生恐怖效應因此基本不推薦使用，還有一些賦值運算

7. var a = function(){console.log(7)}() 會致使函數自執行,包括一些邏輯運算符

8. 1 && function(){console.log(8)}()

9. 0 || function(){console.log(9)}() 甚至包括 new （畢竟ta也是一個運算符）也會致使函數的自執行！

在實際開發中，爲了防止代碼壓縮致使1，2方式與值錢的代碼發生不清不楚的關係，通常會選擇在當即執行函數以前添上 '；'。不過通常在使用時不多會接收返回值，還有一個更好的推薦--void運算符。

10. void function(){console.log(10)}()

經過void 知足咱們不用始終記得添加 ; 的痛苦~~。

OK 除了兩種常見的運用方式，有沒有以爲知道的更多了點呢。

有問題也不給你聯繫我