自執行匿名函數剖析

引入

在很多js代碼中我們常常會看見這樣一種寫法：

(function( window, undefined ) {
    // code
})(window);

這種寫法我們稱之為自執行匿名函數（self-executing anonymous function）。

正如它的名字一樣，它是自己執行自己的，前一個括號是一個匿名函數，后一個括號代表立即執行。

 

 

---

 

函數和函數表達式的區別

• 語法

function keqing(){   //函數
    alert('Hi~');  
}

var keqing = function(){  //函數表達式
　　alert('Hi~')
}

• 函數的函數聲明有一個重要特征 —— 函數聲明提升 

keqing();   //Hi~
function keqing(){   
　　alert('Hi~');
}

函數：在讀取執行代碼之前會先讀取函數聲明

 

keqing();  // Uncaught TypeError: keqing is not a function
var keqing = function(){
　　alert('Hi~');
}

函數表達式：沒有函數聲明提升，在執行前必須先賦值

• 回到我們的自執行匿名函數

function(){
   alert('aaaa');  
}()  //出錯，因為這是一個匿名函數，函數后不能跟圓括號


---------------> 函數聲明想要變成函數表達式，就需要給它加一個圓括號

(function(){
　　alert('aaaa');
})() // aaaa  這樣就變成了自執行匿名函數

 

 

---

 

自執行匿名函數剖析

回到我們最開始的栗子，

(function( window, undefined ) {
    // code
})(window);

 

1.自執行匿名函數寫法的好處：防止變量名沖突

2.自執行匿名函數的其他多種寫法：

( function() {}() );
( function() {} )();
[ function() {}() ];

~ function() {}();
! function() {}();
+ function() {}();
- function() {}();

var f = function() {}();

//當然不需要都記住，會用就OK。還有很多不常見的我就不一一舉例了..

3.為何要傳入window？

這樣傳入window可將其從全局變量變為局部變量，在函數作用域內可以直接訪問到window，就不用將作用域鏈退回到頂層作用域了。

在壓縮代碼時，可以對window進行優化。

4.為何要增加參數undefined？

由於undefined在一些情況下有可能會被重寫，為確保在自執行匿名函數里的undefined是"真的undefined"，就需要增加參數undefined。

 

---

 

 

因為這個經常在工作和面試中出現，所以我就結合《js高級程序設計》小小滴總結了一下，感覺印象更深刻，了解更透徹了，希望對大家能有所幫助！