Javascript 匿名函數(shù)及其代碼模式原理

2019-11-21 00:39:35

字體：大中小

供稿：網(wǎng)友

關(guān)于什么是匿名函數(shù)，及它帶來的優(yōu)勢在本文就不深究了，先拋出一個常用的匿名函數(shù)：
(function(){alert('yo')})()
很多同學(xué)知道怎么用這種匿名函數(shù)，卻或許并不明白為什么這樣寫就能夠調(diào)用匿名函數(shù)。也許知道后面的圓括號是執(zhí)行前面的函數(shù)，而并不清楚前面的圓括號具有何種含義！本文將帶你了解匿名函數(shù)的代碼模式原理。
OK,先來看看更多匿名函數(shù)調(diào)用模式：

復(fù)制代碼代碼如下:

 
(function(){alert(1);}()) 
(function(){alert(2);})() 
void function(){alert(3);}() 

以上3個都是正確的，且在功能上都是等同的。
再來看下錯誤的書寫方式：
4.
function(){alert('yo')}()
上面這段代碼會拋出語法錯誤，這究竟是為什么呢？帶著這個問題我們來看看秦歌給出的解答：
1.函數(shù)字面量：首先聲明一個函數(shù)對象，然后執(zhí)行它。
2.優(yōu)先表達(dá)式：由于Javascript執(zhí)行表達(dá)式是從圓括號里面到外面，所以可以用圓括號強(qiáng)制執(zhí)行聲明的函數(shù)。
3.void操作符：用void操作符去執(zhí)行一個沒有用圓括號包圍的一個單獨操作數(shù)。
好吧，先不管解答是否正確，我們把這些放到一邊，再來看看函數(shù)聲明的語法和函數(shù)表達(dá)式的語法說明：
一、函數(shù)聲明：

復(fù)制代碼代碼如下:

 
function name([param[, param[, ... param]]]) { 
statements 
} 

這里的函數(shù)名稱name是不可以省略的。如果省略了函數(shù)名稱就會報錯。
這也合理解釋了為什么直接寫
function(){alert('yo')}
會出錯？因為編譯器當(dāng)他是函數(shù)聲明而代碼中沒有出現(xiàn)函數(shù)名稱，結(jié)果可想而知。
二、函數(shù)表達(dá)式：

復(fù)制代碼代碼如下:

 
function [name]([param] [, param] [..., param]) { 
statements 
} 

函數(shù)名稱name可以被省略，省略name就是所謂的匿名函數(shù)。說明一點：如果需要創(chuàng)建匿名函數(shù)，則必須給出一個函數(shù)表達(dá)式而非函數(shù)的顯式聲明
現(xiàn)在我們可以做出更準(zhǔn)確的解釋：
1/2/3匿名函數(shù)代碼模式只不過是通過括號或者void告訴編譯器，把function(){}當(dāng)作函數(shù)表達(dá)式來解釋罷了。這其中并沒有那么復(fù)雜的優(yōu)先級和void操作符原理。這只不過是一個簡單的語法轉(zhuǎn)換。
可以想象，只要符合函數(shù)表達(dá)式的語法，我們就可以創(chuàng)建出N種匿名函數(shù)代碼模式，比如

復(fù)制代碼代碼如下:

 
!!function(){ 
alert('yo'); 
}() 
+function(){ 
alert('yo'); 
}() 

等等等等……
這其中并沒有更深層的奧秘，只是函數(shù)聲明與表達(dá)式的區(qū)別，如果你還不理解，也許就是你想多了想復(fù)雜了。
我們現(xiàn)在學(xué)習(xí)Javascript還沒有特專業(yè)的培訓(xùn)安排與課程，編碼能力的提升都是要靠自己平時的練習(xí)與積累。然而越是這樣越容易忽略最基礎(chǔ)的知識，最后把簡單的問題復(fù)雜化，不可取。更有些同學(xué)是抱著能夠使用的態(tài)度學(xué)習(xí)Javascript，而并不去深究，知其然而不知其所以然，其實到最后能力并沒有多大的提升……更不可?。?
延伸閱讀：
What do parentheses surrounding a JavaScript function declaration mean?

上一篇：jQuery 前的按鍵判斷代碼

下一篇：JS 有名函數(shù)表達(dá)式全面解析