妙用緩存調(diào)用鏈實(shí)現(xiàn)JS方法的重載
1.什么是方法重載
方法重載是指在一個(gè)類中定義多個(gè)同名的方法,但要求每個(gè)方法具有不同的參數(shù)的類型或參數(shù)的個(gè)數(shù)。
簡而言之就是:方法重載就是方法名稱重復(fù),加載參數(shù)不同。
具體看請左轉(zhuǎn): 方法重載/百度百科
那么js如何實(shí)現(xiàn)這個(gè)呢???
2. js如何實(shí)現(xiàn)?
首先javascript是沒有重載函數(shù)/方法這個(gè)概念的,但是js提供了一個(gè)arguments這個(gè)方法參數(shù),通過這個(gè)參數(shù)的length屬性就可以拿到方法參數(shù)的長度,o~對了,咱們今天實(shí)現(xiàn)的也僅僅是按照參數(shù)長度重載,而不是參數(shù)類型~~·length ,
那么及下載呢,一旦有了方法參數(shù)長度,于是出現(xiàn)了比常見的switch寫法:
var seven={ dosomething:function(){ switch(arguments.length){ case 0: console.log(arguments.length); //dosomething break; case 1: console.log(arguments.length); //dosomething break; case 2: //dosomething console.log(arguments.length); break; } } }
3.優(yōu)化
wow~如果10個(gè)方法就需要10個(gè)分支~而且很不好維護(hù)~因?yàn)槊總€(gè)方法體都在case下,或者單獨(dú)提出來寫成一個(gè)function~
然后這些都是不好的~不易維護(hù)的,逼格不夠高的~那么咱們應(yīng)該如何優(yōu)雅的實(shí)現(xiàn)對于不同參數(shù)的同一方法名的處理呢?
這就用到這個(gè) apply 這個(gè)方法了.
咱們?yōu)閟even編寫一個(gè)addMethod
方法
var seven = { addMethod: function (fname, func) { var old = this[fname]; this[fname] = function () { if (arguments.length == func.length) { return func.apply(this,arguments); } if (typeof old == 'function') { return old.apply(this, arguments); } } } };
修改后的seven如上,然后之前寫的switch就可以這樣搞了:
seven.addMethod('dosomething', function (x) { console.log(arguments.length); //dosomething }); seven.addMethod('dosomething', function (x,y) { console.log(arguments.length); //dosomething }); seven.addMethod('dosomething', function (x,y,z) { console.log(arguments.length); //dosomething });
咱們要增加方法,只需要調(diào)用這個(gè)addMethod方法就ok了,是不是覺得簡單明了,更加清晰。
那么這段代碼的原理呢,其實(shí)也很簡單,就是緩存舊方法,然后根據(jù)參數(shù)長度依次apply鏈?zhǔn)秸{(diào)用,直到找到和當(dāng)前參數(shù)等長的方法~然后進(jìn)行調(diào)用。
func
和 old
很有可能讓初來乍到的童鞋們迷惑,其實(shí)不然,這里巧妙的使用了JavaScript語言的特性,這個(gè)old每一次保存的都是上一次方法的引用,而且每次都是全新的,而舊的old又保持著引用,這是什么呢?閉包嘍~。
相關(guān)文章
layui表單驗(yàn)證select下拉框?qū)崿F(xiàn)驗(yàn)證的方法
今天小編就為大家分享一篇layui表單驗(yàn)證select下拉框?qū)崿F(xiàn)驗(yàn)證的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09Fullpage.js固定導(dǎo)航欄-實(shí)現(xiàn)定位導(dǎo)航欄
FullPage.js 是一個(gè)簡單而易于使用的插件,用來創(chuàng)建全屏滾動網(wǎng)站(也被稱為單頁網(wǎng)站)。接下來通過本文給大家介紹Fullpage.js固定導(dǎo)航欄-實(shí)現(xiàn)定位導(dǎo)航欄,對fullpage.js導(dǎo)航欄相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-03-03JavaScript 讀URL參數(shù)增強(qiáng)改進(jìn)版版
網(wǎng)上有不少JavaScript 讀 URL 參數(shù)的函數(shù),但沒考慮到 URL 中帶 # 符的情況,我的可以處理這種情況,并使用了點(diǎn)對象寫法,優(yōu)化了些性能。2008-10-10js冒泡法和數(shù)組轉(zhuǎn)換成字符串示例代碼
將數(shù)組轉(zhuǎn)換成字符串的方法有很多,想必大家也不會陌生,下面為大家講解下js冒泡法的使用,感興趣的朋友可以參考下2013-08-08微信小程序?qū)崿F(xiàn)image組件圖片自適應(yīng)寬度比例顯示的方法
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)image組件圖片自適應(yīng)寬度比例顯示的方法,簡單講述了image組件的常用屬性,并結(jié)合實(shí)例形式分析了微信小程序?qū)崿F(xiàn)圖片自適應(yīng)寬度比例的相關(guān)操作技巧,需要的朋友可以參考下2018-01-01把json格式的字符串轉(zhuǎn)換成javascript對象或數(shù)組的方法總結(jié)
下面小編就為大家?guī)硪黄裫son格式的字符串轉(zhuǎn)換成javascript對象或數(shù)組的方法總結(jié)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11基于Three.js實(shí)現(xiàn)酷炫3D地圖效果
這篇文章主要為大家詳細(xì)介紹了如何利用Three.js實(shí)現(xiàn)酷炫3D地圖的效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以嘗試一下2022-10-10javascript創(chuàng)建createXmlHttpRequest對象示例代碼
這篇文章主要介紹了javascript創(chuàng)建createXmlHttpRequest對象的示例代碼。需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02