這篇文章主要講解了“為什么不使用JS匿名函數(shù)”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“為什么不使用JS匿名函數(shù)”吧!
創(chuàng)新互聯(lián)建站為客戶提供專業(yè)的成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、外貿(mào)營銷網(wǎng)站建設(shè)、程序、域名、空間一條龍服務(wù),提供基于WEB的系統(tǒng)開發(fā). 服務(wù)項(xiàng)目涵蓋了網(wǎng)頁設(shè)計(jì)、網(wǎng)站程序開發(fā)、WEB系統(tǒng)開發(fā)、微信二次開發(fā)、成都手機(jī)網(wǎng)站制作等網(wǎng)站方面業(yè)務(wù)。
如果你不知道匿名函數(shù)是什么,這里有一個引語:
匿名函數(shù)是一種在運(yùn)行時動態(tài)聲明的函數(shù)。它們之所以被稱為匿名函數(shù)是因?yàn)椴煌谄胀ê瘮?shù),它們并沒有函數(shù)名。?—?Helen Emerson, Helephant.com
匿名函數(shù)形式如下:
function () { ... code ... } OR (args) => { ... code .. }
今天我嘗試讓大家理解只有在絕對需要的情況下才使用匿名函數(shù)的想法。匿名函數(shù)不應(yīng)該是***,而且你自己也應(yīng)該知道為什么使用它。當(dāng)理解這種想法之后,你的代碼會變得更簡潔,更容易維護(hù),并且更容易跟蹤bug。
先從避免使用匿名函數(shù)的三個理由開始:
無論你多么擅長寫代碼,出現(xiàn)錯誤也是不可避免的。有時候,這些錯誤很容易被查出,有時候并不容易。
如果你知道這些錯誤來自哪里,那么錯誤會很容易被查出來。為了容易查出錯誤,我們使用這個被叫做堆棧軌跡的工具。如果你不了解堆棧軌跡,goole給出了很棒的介紹。
假設(shè)現(xiàn)在有一個非常簡單的項(xiàng)目:
function start () { (function middle () { (function end () { console.lg('test'); })() })() }
上面代碼里面有一個非常愚蠢的錯誤,拼寫錯誤(console.log)。在小項(xiàng)目里面,這個拼寫錯誤不是什么大問題。如果這是一個有非常多模塊非常大的項(xiàng)目一小段,問題就大了。假設(shè)這個愚蠢的錯誤不是你犯的,那么新來的初級工程師將會在他休假之前把這個錯誤提交到代碼庫!
現(xiàn)在,我們必須追查。 使用我們精心命名的函數(shù),我們得到如下的堆棧跟蹤:
謝謝你命名你的函數(shù),初級開發(fā)者們! 現(xiàn)在我們可以輕松地追蹤到這個bug。
但是..一旦我們解決了這個問題,就會發(fā)現(xiàn)還有另一個bug。 這次是一位更資深的開發(fā)人員介紹的。這個人知道lambdas(匿名函數(shù)),并在代碼中大量使用它們。 結(jié)果他們偶然發(fā)現(xiàn)了一個bug,我們的工作就是追蹤它。
下面是代碼:
(function () { (function () { (function () { console.lg('test'); })(); })(); })();
吃不吃驚,這名開發(fā)者也忘記了如何拼寫console.log了!這也太巧合了吧!令人感到遺憾的是,他們都沒有命名他們的函數(shù)。
那么控制臺會輸出什么呢?
好吧,我們至少還有行號,對吧?在這個例子中,看起來我們有大約7行代碼。如果我們處理一大段代碼會如何呢?比如一萬行代碼?行號的跨度如此之大該怎么辦呢?如果代碼被折疊后有沒有一個代碼地圖文件,那么對行號的渲染是不是根本就是沒有什么用了呢?
我想對這些問題的回答相當(dāng)簡單,答案就是:想這些會讓你一整天都會過的相當(dāng)糟心。
可讀性
咦,我聽說你還不信。你仍舊對你的匿名函數(shù)戀戀不舍,并且還從未發(fā)生過bug。我的錯,你的代碼是完整的。但是讓我們看看這個!
看看下面兩段代碼:
function initiate (arguments) { return new Promise((resolve, reject) => { try { if (arguments) { return resolve(true); } return resolve(false); } catch (e) { reject(e); } }); } initiate(true) .then(res => { if (res) { doSomethingElse(); } else { doSomething(); } ).catch(e => { logError(e.message); restartApp(); } );
這是一個非常不正常的例子,但是我相信你已經(jīng)明白我要說什么了。我們反悔了一個promise方法,我們用這個promise對象/方法處理不同的響應(yīng)。
你也許會認(rèn)為幾段代碼讀起來并不難,但我認(rèn)為它們可以變得更好!
如果我們?nèi)サ羲械哪涿瘮?shù)會怎樣呢?
function initiate (arguments) { return new Promise(checkForArguments); } function checkForArguments (resolve, reject) { try { if (arguments) { return resolve(true); } return resolve(false); } catch (e) { reject(e); } } function evaluateRes (res) { if (res) { doSomethingElse(); } else { doSomething(); } } function handleError (e) { logError(e.message); restartApp(); } initiate(true) .then(evaluateRes) .catch(handleError);
好,先講清楚:這部分代碼更長,但我不認(rèn)為只是增加了可讀性!我們精心命名的函數(shù)與匿名函數(shù)不一樣,只要我們一看到它們的名字就知道它們的功能是什么。這避免了在評估代碼時出現(xiàn)心理障礙。
這也有助于分清楚其中的關(guān)系。與創(chuàng)建一個方法、將其傳遞、然后運(yùn)行邏輯不同,在第二個例子中的參數(shù)被給到了then,catch只是指向了發(fā)生所有事情的函數(shù)。
關(guān)于更具有可讀性,我沒有什么再能說服你的了。但是也許你還沒被說服的話,我可以試一下***的論據(jù)。
可重用性
你注意到上一個例子了嗎?上個例子中的函數(shù)的使用范圍從參數(shù)和初始化函數(shù),變?yōu)樽屗泻瘮?shù)都能使用。
當(dāng)你使用匿名函數(shù)時這些函數(shù)很難在你的應(yīng)用程序內(nèi)重復(fù)使用。
可重用性將不復(fù)存在,最終你會一遍又一遍地寫重復(fù)的代碼。正如我們所見的,代碼寫的越少引入的Bug就越少,用戶必須加載的內(nèi)容就越少。所有人都會因此獲益!
相反的,命名函數(shù)可以全局使用,而不需要像變量一樣到處傳遞。你的代碼的可重用性會更好,
匿名函數(shù)有可取的地方嗎?
有。雖然很不愿意承認(rèn),但有時候使用匿名函數(shù)是***的選擇。
const stuff = [ { hide: true, name: 'justin' }, { hide: false, name: 'lauren' }, { hide: false, name: 'max' }, ]; const filteredStuff = stuff.filter(s => !s.hide);
上邊代碼中的匿名函數(shù)s => !s.hide非常簡單,即使不能在別的地方使用也不會對別人有任何影響,而且也可以在stuff.filter中顯示出堆棧調(diào)用。如果想要重用這段代碼,***重用整段代碼:
function filterByHide (array) { return array.filter(item => !item.hide); }
有時你想把你所有的代碼封裝到匿名函數(shù)中,以保證全局范圍不會被污染。
(() => { ... your code here ... })();
在??臻g中擁有一個***的匿名函數(shù)真得不會有什么錯誤。沒有代碼重用是痛苦的,因?yàn)橥暾哪康氖潜3址椒▋?nèi)含。
感謝各位的閱讀,以上就是“為什么不使用JS匿名函數(shù)”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對為什么不使用JS匿名函數(shù)這一問題有了更深刻的體會,具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián),小編將為大家推送更多相關(guān)知識點(diǎn)的文章,歡迎關(guān)注!