Javascript 匿名函數(shù)及其代碼模式原理
更新時(shí)間:2010年03月19日 11:32:51 作者:
很多同學(xué)知道怎么用這種匿名函數(shù),卻或許并不明白為什么這樣寫(xiě)就能夠調(diào)用匿名函數(shù)。也許知道后面的圓括號(hào)是執(zhí)行前面的函數(shù),而并不清楚前面的圓括號(hào)具有何種含義!本文將帶你了解匿名函數(shù)的代碼模式原理。
關(guān)于什么是匿名函數(shù),及它帶來(lái)的優(yōu)勢(shì)在本文就不深究了,先拋出一個(gè)常用的匿名函數(shù):
(function(){alert('yo')})()
很多同學(xué)知道怎么用這種匿名函數(shù),卻或許并不明白為什么這樣寫(xiě)就能夠調(diào)用匿名函數(shù)。也許知道后面的圓括號(hào)是執(zhí)行前面的函數(shù),而并不清楚前面的圓括號(hào)具有何種含義!本文將帶你了解匿名函數(shù)的代碼模式原理。
OK,先來(lái)看看更多匿名函數(shù)調(diào)用模式:
(function(){alert(1);}())
(function(){alert(2);})()
void function(){alert(3);}()
以上3個(gè)都是正確的,且在功能上都是等同的。
再來(lái)看下錯(cuò)誤的書(shū)寫(xiě)方式:
4.
function(){alert('yo')}()
上面這段代碼會(huì)拋出語(yǔ)法錯(cuò)誤,這究竟是為什么呢?帶著這個(gè)問(wèn)題我們來(lái)看看秦歌給出的解答:
1.函數(shù)字面量:首先聲明一個(gè)函數(shù)對(duì)象,然后執(zhí)行它。
2.優(yōu)先表達(dá)式:由于Javascript執(zhí)行表達(dá)式是從圓括號(hào)里面到外面,所以可以用圓括號(hào)強(qiáng)制執(zhí)行聲明的函數(shù)。
3.void操作符:用void操作符去執(zhí)行一個(gè)沒(méi)有用圓括號(hào)包圍的一個(gè)單獨(dú)操作數(shù)。
好吧,先不管解答是否正確,我們把這些放到一邊,再來(lái)看看函數(shù)聲明的語(yǔ)法和函數(shù)表達(dá)式的語(yǔ)法說(shuō)明:
一、函數(shù)聲明:
function name([param[, param[, ... param]]]) {
statements
}
這里的函數(shù)名稱name是不可以省略的。如果省略了函數(shù)名稱就會(huì)報(bào)錯(cuò)。
這也合理解釋了為什么直接寫(xiě)
function(){alert('yo')}
會(huì)出錯(cuò)?因?yàn)榫幾g器當(dāng)他是函數(shù)聲明而代碼中沒(méi)有出現(xiàn)函數(shù)名稱,結(jié)果可想而知。
二、函數(shù)表達(dá)式:
function [name]([param] [, param] [..., param]) {
statements
}
函數(shù)名稱name可以被省略,省略name就是所謂的匿名函數(shù)。說(shuō)明一點(diǎn):如果需要?jiǎng)?chuàng)建匿名函數(shù),則必須給出一個(gè)函數(shù)表達(dá)式而非函數(shù)的顯式聲明
現(xiàn)在我們可以做出更準(zhǔn)確的解釋:
1\2\3匿名函數(shù)代碼模式只不過(guò)是通過(guò)括號(hào)或者void告訴編譯器,把function(){}當(dāng)作函數(shù)表達(dá)式來(lái)解釋罷了。這其中并沒(méi)有那么復(fù)雜的優(yōu)先級(jí)和void操作符原理。這只不過(guò)是一個(gè)簡(jiǎn)單的語(yǔ)法轉(zhuǎn)換。
可以想象,只要符合函數(shù)表達(dá)式的語(yǔ)法,我們就可以創(chuàng)建出N種匿名函數(shù)代碼模式,比如
!!function(){
alert('yo');
}()
+function(){
alert('yo');
}()
等等等等……
這其中并沒(méi)有更深層的奧秘,只是函數(shù)聲明與表達(dá)式的區(qū)別,如果你還不理解,也許就是你想多了想復(fù)雜了。
我們現(xiàn)在學(xué)習(xí)Javascript還沒(méi)有特專業(yè)的培訓(xùn)安排與課程,編碼能力的提升都是要靠自己平時(shí)的練習(xí)與積累。然而越是這樣越容易忽略最基礎(chǔ)的知識(shí),最后把簡(jiǎn)單的問(wèn)題復(fù)雜化,不可取。更有些同學(xué)是抱著能夠使用的態(tài)度學(xué)習(xí)Javascript,而并不去深究,知其然而不知其所以然,其實(shí)到最后能力并沒(méi)有多大的提升……更不可?。?
延伸閱讀:
What do parentheses surrounding a JavaScript function declaration mean?
(function(){alert('yo')})()
很多同學(xué)知道怎么用這種匿名函數(shù),卻或許并不明白為什么這樣寫(xiě)就能夠調(diào)用匿名函數(shù)。也許知道后面的圓括號(hào)是執(zhí)行前面的函數(shù),而并不清楚前面的圓括號(hào)具有何種含義!本文將帶你了解匿名函數(shù)的代碼模式原理。
OK,先來(lái)看看更多匿名函數(shù)調(diào)用模式:
復(fù)制代碼 代碼如下:
(function(){alert(1);}())
(function(){alert(2);})()
void function(){alert(3);}()
以上3個(gè)都是正確的,且在功能上都是等同的。
再來(lái)看下錯(cuò)誤的書(shū)寫(xiě)方式:
4.
function(){alert('yo')}()
上面這段代碼會(huì)拋出語(yǔ)法錯(cuò)誤,這究竟是為什么呢?帶著這個(gè)問(wèn)題我們來(lái)看看秦歌給出的解答:
1.函數(shù)字面量:首先聲明一個(gè)函數(shù)對(duì)象,然后執(zhí)行它。
2.優(yōu)先表達(dá)式:由于Javascript執(zhí)行表達(dá)式是從圓括號(hào)里面到外面,所以可以用圓括號(hào)強(qiáng)制執(zhí)行聲明的函數(shù)。
3.void操作符:用void操作符去執(zhí)行一個(gè)沒(méi)有用圓括號(hào)包圍的一個(gè)單獨(dú)操作數(shù)。
好吧,先不管解答是否正確,我們把這些放到一邊,再來(lái)看看函數(shù)聲明的語(yǔ)法和函數(shù)表達(dá)式的語(yǔ)法說(shuō)明:
一、函數(shù)聲明:
復(fù)制代碼 代碼如下:
function name([param[, param[, ... param]]]) {
statements
}
這里的函數(shù)名稱name是不可以省略的。如果省略了函數(shù)名稱就會(huì)報(bào)錯(cuò)。
這也合理解釋了為什么直接寫(xiě)
function(){alert('yo')}
會(huì)出錯(cuò)?因?yàn)榫幾g器當(dāng)他是函數(shù)聲明而代碼中沒(méi)有出現(xiàn)函數(shù)名稱,結(jié)果可想而知。
二、函數(shù)表達(dá)式:
復(fù)制代碼 代碼如下:
function [name]([param] [, param] [..., param]) {
statements
}
函數(shù)名稱name可以被省略,省略name就是所謂的匿名函數(shù)。說(shuō)明一點(diǎn):如果需要?jiǎng)?chuàng)建匿名函數(shù),則必須給出一個(gè)函數(shù)表達(dá)式而非函數(shù)的顯式聲明
現(xiàn)在我們可以做出更準(zhǔn)確的解釋:
1\2\3匿名函數(shù)代碼模式只不過(guò)是通過(guò)括號(hào)或者void告訴編譯器,把function(){}當(dāng)作函數(shù)表達(dá)式來(lái)解釋罷了。這其中并沒(méi)有那么復(fù)雜的優(yōu)先級(jí)和void操作符原理。這只不過(guò)是一個(gè)簡(jiǎn)單的語(yǔ)法轉(zhuǎn)換。
可以想象,只要符合函數(shù)表達(dá)式的語(yǔ)法,我們就可以創(chuàng)建出N種匿名函數(shù)代碼模式,比如
復(fù)制代碼 代碼如下:
!!function(){
alert('yo');
}()
+function(){
alert('yo');
}()
等等等等……
這其中并沒(méi)有更深層的奧秘,只是函數(shù)聲明與表達(dá)式的區(qū)別,如果你還不理解,也許就是你想多了想復(fù)雜了。
我們現(xiàn)在學(xué)習(xí)Javascript還沒(méi)有特專業(yè)的培訓(xùn)安排與課程,編碼能力的提升都是要靠自己平時(shí)的練習(xí)與積累。然而越是這樣越容易忽略最基礎(chǔ)的知識(shí),最后把簡(jiǎn)單的問(wèn)題復(fù)雜化,不可取。更有些同學(xué)是抱著能夠使用的態(tài)度學(xué)習(xí)Javascript,而并不去深究,知其然而不知其所以然,其實(shí)到最后能力并沒(méi)有多大的提升……更不可?。?
延伸閱讀:
What do parentheses surrounding a JavaScript function declaration mean?
您可能感興趣的文章:
- (轉(zhuǎn)載)JavaScript中匿名函數(shù),函數(shù)直接量和閉包
- Javascript的匿名函數(shù)講解
- Javascript的匿名函數(shù)小結(jié)
- javascript 匿名函數(shù)的理解(透徹版)
- JavaScript 編寫(xiě)匿名函數(shù)的幾種方法
- Javascript匿名函數(shù)的一種應(yīng)用 代碼封裝
- 通過(guò)javascript的匿名函數(shù)來(lái)分析幾段簡(jiǎn)單有趣的代碼
- JavaScript 匿名函數(shù)(anonymous function)與閉包(closure)
- 一個(gè)關(guān)于javascript匿名函數(shù)的問(wèn)題分析
- Javascript中的回調(diào)函數(shù)和匿名函數(shù)的回調(diào)示例介紹
- 詳談JavaScript 匿名函數(shù)及閉包
- JavaScript函數(shù)的一些注意要點(diǎn)小結(jié)及js匿名函數(shù)
相關(guān)文章
js中Object.defineProperty()方法的不詳解
這篇文章主要介紹了js中Object.defineProperty()方法的不詳解,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
記錄微信小程序 height: calc(xx - xx);無(wú)效問(wèn)題
這篇文章主要介紹了微信小程序 - height: calc(xx - xx);無(wú)效 問(wèn)題,文中給大家擴(kuò)展介紹下jquery點(diǎn)擊添加樣式,再次點(diǎn)擊移除樣式的實(shí)例代碼,需要的朋友可以參考下2019-12-12
JS實(shí)現(xiàn)登錄頁(yè)面記住密碼和enter鍵登錄方法推薦
下面小編就為大家?guī)?lái)一篇JS實(shí)現(xiàn)登錄頁(yè)面記住密碼和enter鍵登錄方法推薦。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。2016-05-05
javascript全局變量封裝模塊實(shí)現(xiàn)代碼
javascript全局變量封裝模塊的應(yīng)用,本文將詳細(xì)介紹,需要了解更多的朋友可以參考下2012-11-11
javascript 事件對(duì)象 坐標(biāo)事件說(shuō)明
javascript 事件對(duì)象 坐標(biāo)事件說(shuō)明,學(xué)習(xí)js坐標(biāo)事件的朋友可以參考下。2010-05-05
關(guān)于JavaScript中事件綁定的方法總結(jié)
下面小編就為大家?guī)?lái)一篇JavaScript中事件綁定的方法總結(jié)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
使用Three.js制作一個(gè)3D獎(jiǎng)牌頁(yè)面
本文將使用React+Three.js技術(shù)棧,制作一個(gè)專屬的3D獎(jiǎng)牌頁(yè)面,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起動(dòng)手試一試2022-01-01

