Javascript 匿名函數(shù)及其代碼模式原理
更新時間:2010年03月19日 11:32:51 作者:
很多同學(xué)知道怎么用這種匿名函數(shù),卻或許并不明白為什么這樣寫就能夠調(diào)用匿名函數(shù)。也許知道后面的圓括號是執(zhí)行前面的函數(shù),而并不清楚前面的圓括號具有何種含義!本文將帶你了解匿名函數(shù)的代碼模式原理。
關(guān)于什么是匿名函數(shù),及它帶來的優(yōu)勢在本文就不深究了,先拋出一個常用的匿名函數(shù):
(function(){alert('yo')})()
很多同學(xué)知道怎么用這種匿名函數(shù),卻或許并不明白為什么這樣寫就能夠調(diào)用匿名函數(shù)。也許知道后面的圓括號是執(zhí)行前面的函數(shù),而并不清楚前面的圓括號具有何種含義!本文將帶你了解匿名函數(shù)的代碼模式原理。
OK,先來看看更多匿名函數(shù)調(diào)用模式:
(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á)式是從圓括號里面到外面,所以可以用圓括號強制執(zhí)行聲明的函數(shù)。
3.void操作符:用void操作符去執(zhí)行一個沒有用圓括號包圍的一個單獨操作數(shù)。
好吧,先不管解答是否正確,我們把這些放到一邊,再來看看函數(shù)聲明的語法和函數(shù)表達(dá)式的語法說明:
一、函數(shù)聲明:
function name([param[, param[, ... param]]]) {
statements
}
這里的函數(shù)名稱name是不可以省略的。如果省略了函數(shù)名稱就會報錯。
這也合理解釋了為什么直接寫
function(){alert('yo')}
會出錯?因為編譯器當(dāng)他是函數(shù)聲明而代碼中沒有出現(xiàn)函數(shù)名稱,結(jié)果可想而知。
二、函數(shù)表達(dá)式:
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ù)代碼模式,比如
!!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?
(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á)式是從圓括號里面到外面,所以可以用圓括號強制執(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?
您可能感興趣的文章:
- (轉(zhuǎn)載)JavaScript中匿名函數(shù),函數(shù)直接量和閉包
- Javascript的匿名函數(shù)講解
- Javascript的匿名函數(shù)小結(jié)
- javascript 匿名函數(shù)的理解(透徹版)
- JavaScript 編寫匿名函數(shù)的幾種方法
- Javascript匿名函數(shù)的一種應(yīng)用 代碼封裝
- 通過javascript的匿名函數(shù)來分析幾段簡單有趣的代碼
- JavaScript 匿名函數(shù)(anonymous function)與閉包(closure)
- 一個關(guān)于javascript匿名函數(shù)的問題分析
- Javascript中的回調(diào)函數(shù)和匿名函數(shù)的回調(diào)示例介紹
- 詳談JavaScript 匿名函數(shù)及閉包
- JavaScript函數(shù)的一些注意要點小結(jié)及js匿名函數(shù)
相關(guān)文章
javascript預(yù)加載圖片、css、js的方法示例介紹
預(yù)加載的好處可以讓網(wǎng)頁更快的呈現(xiàn)給用戶,缺點就是可能會增加無用的請求,不多說了,作為一個前端攻城師都懂的,下面分享我做的測試和得到的結(jié)果2013-10-10javascript時間排序算法實現(xiàn)活動秒殺倒計時效果
這篇文章主要介紹了javascript時間排序算法實現(xiàn)活動秒殺倒計時效果,即一個頁面多個倒計時排序,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-03-03js獲取html參數(shù)及向swf傳遞參數(shù)應(yīng)用介紹
HTML頁面是在客戶端執(zhí)行的,這樣要獲取參數(shù)必須使用客戶端腳本如JavaScript,在這點上與服務(wù)器端腳本獲取參數(shù)方式有所不同接下來將詳細(xì)介紹下感興趣的你可不要錯過了哈2013-02-02JavaScript?中從?URL?獲取數(shù)據(jù)的方法
這篇文章主要介紹了在?JavaScript?中從?URL?獲取數(shù)據(jù),我們使用了open函數(shù),將請求方法類型和URL作為參數(shù)傳遞,并調(diào)用XMLHttpRequest()的send()方法,結(jié)合示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05gulp-uglify 與gulp.watch()配合使用時報錯(重復(fù)壓縮問題)
gulp是基于Nodejs的自動任務(wù)運行器,gulp 和 grunt 非常類似,但相比于 grunt 的頻繁 IO 操作,gulp 的流操作,能更快地更便捷地完成構(gòu)建工作。今天在學(xué)習(xí)gulp時遇到當(dāng)用gulp.watch來監(jiān)聽js文件的變動時出現(xiàn)重復(fù)壓縮問題,下面小編給大家解答下2016-08-08