讓JavaScript 輕松支持函數(shù)重載 (Part 1 - 設(shè)計(jì))
更新時(shí)間：2009年08月04日 00:18:17 作者：
JavaScript支持函數(shù)重載嗎？可以說(shuō)不支持，也可以說(shuō)支持。說(shuō)不支持，是因?yàn)镴avaScript不能好像其它原生支持函數(shù)重載的語(yǔ)言一樣，直接寫(xiě)多個(gè)同名函數(shù)，讓編譯器來(lái)判斷某個(gè)調(diào)用對(duì)應(yīng)的是哪一個(gè)重載。
JavaScript支持重載嗎？
JavaScript支持函數(shù)重載嗎？可以說(shuō)不支持，也可以說(shuō)支持。說(shuō)不支持，是因?yàn)镴avaScript不能好像其它原生支持函數(shù)重載的語(yǔ)言一樣，直接寫(xiě)多個(gè)同名函數(shù)，讓編譯器來(lái)判斷某個(gè)調(diào)用對(duì)應(yīng)的是哪一個(gè)重載。說(shuō)支持，是因?yàn)镴avaScript函數(shù)對(duì)參數(shù)列表不作任何限制，可以在函數(shù)內(nèi)部模擬對(duì)函數(shù)重載的支持。
實(shí)際上，在很多著名的開(kāi)源庫(kù)當(dāng)中，我們都可以看到函數(shù)內(nèi)部模擬重載支持的設(shè)計(jì)。例如說(shuō)jQuery的jQuery.extend方法，就是通過(guò)參數(shù)類型判斷出可選參數(shù)是否存在，如果不存在的話就對(duì)參數(shù)進(jìn)行移位以確保后面的邏輯正確運(yùn)行。我相信很多人在寫(xiě)JavaScript時(shí)也寫(xiě)過(guò)類似的代碼，以求為功能豐富的函數(shù)提供一個(gè)（或多個(gè)）簡(jiǎn)單的調(diào)用入口。
不過(guò)做種做法一個(gè)根本的問(wèn)題，那就是違反了DRY原則。每個(gè)支持重載的函數(shù)內(nèi)部都多出來(lái)一段代碼，用于根據(jù)參數(shù)個(gè)數(shù)和參數(shù)類型處理重載，這些代碼暗含著重復(fù)的邏輯，寫(xiě)出來(lái)卻又每一段都不一樣。此外，這些代碼要維護(hù)起來(lái)也不容易，因?yàn)殚喿x代碼時(shí)你并不能一眼看出函數(shù)支持的幾種重載方式是什么，要對(duì)重載做出維護(hù)自然也困難。
描述重載入口的DSL
我希望能夠在JavaScript中以一種簡(jiǎn)單的方式來(lái)描述重載入口。最好就如同在其它語(yǔ)言中一樣，使用函數(shù)簽名來(lái)區(qū)分重載入口，因?yàn)槲艺J(rèn)為函數(shù)簽名就是這方面最好的DSL。我假想中最符合JavaScript語(yǔ)法的重載入口描述DSL應(yīng)該是這樣子的：
var sum = new Overload();
sum.add("Number, Number",
function(x, y) { return x + y; });
sum.add("Number, Number, Number",
function(x, y, z) { return x + y + z; });
在描述好重載入口與對(duì)應(yīng)函數(shù)體后，對(duì)sum函數(shù)的調(diào)用應(yīng)該是這樣子的：
sum(1, 2);
sum(1, 2, 3);
上述代碼在我看來(lái)非常清晰，也非常容易維護(hù)——你可以一眼看得出重載入口的簽名，并且要修改或者增加重載入口都是很容易的事情。但是我們遇到了一個(gè)問(wèn)題，那就是JavaScript里面的函數(shù)是不能new出來(lái)的，通過(guò)new Overload()獲得的對(duì)象一定不能被調(diào)用，為此我們只能把Overload做成一個(gè)靜態(tài)類，靜態(tài)方法返回的是Function實(shí)例：
var sum = Overload
.add("Number, Number",
function(x, y) { return x + y; })
.add("Number, Number, Number",
function(x, y, z) { return x + y + z; });
必要的重載入口支持
想象一下，有哪些常見(jiàn)的JavaScript函數(shù)入口是用上述DSL無(wú)法描述的？我所知道的有兩種：
任意類型參數(shù)
假想我們要寫(xiě)一個(gè)each函數(shù)，對(duì)于Array就迭代它的下標(biāo)，對(duì)于其它類型就迭代它的所有成員，這兩個(gè)函數(shù)入口的參數(shù)列表如何聲明？如果用C#，我們會(huì)如此描述兩個(gè)函數(shù)入口：
void Each(IEnumerable iterator) { }
void Each(object iterator) { }
然而在JavaScript當(dāng)中，Object不是一切類型的基類，(100) instanceof Object的結(jié)果為false，所以我們不能用Object來(lái)指代任意類型，必須引入一個(gè)新的符號(hào)來(lái)指代任意類型?？紤]到這個(gè)符號(hào)不應(yīng)該與任何可能存在的類名沖突，所以我選擇了用"*"來(lái)表示任意類型。上述C#代碼對(duì)應(yīng)的JavaScript應(yīng)該是這樣子的：
var each = Overload
.add("Array",
function(array) { })
.add("*",
function(object) { });
任意數(shù)量參數(shù)
在JavaScript的函數(shù)里面，要求支持任意數(shù)量參數(shù)是很常見(jiàn)的需求，相信使用率比C#里面的params關(guān)鍵字要多得多。在我們之前制定的規(guī)則當(dāng)中，這也無(wú)法描述的，因此我們要引入一個(gè)不和類名沖突的符號(hào)來(lái)表示C#中的params。我選擇了用"..."表示params，意思是這里出現(xiàn)任意多個(gè)參數(shù)都是可以接受的。讓我們看看jQuery.extend的重載應(yīng)該如何描述：
var extend = Overload
.add("*, ...",
function(target) { })
.add("Boolean, *, ...",
function(deep, target) { });
小結(jié)
在這篇文章當(dāng)中，我們嘗試設(shè)計(jì)出一種適用于JavaScript且易讀易維護(hù)的函數(shù)重載寫(xiě)法。在下一篇文章當(dāng)中，我們將會(huì)嘗試編寫(xiě)Overload類，以實(shí)現(xiàn)這一設(shè)計(jì)。
JavaScript支持函數(shù)重載嗎？可以說(shuō)不支持，也可以說(shuō)支持。說(shuō)不支持，是因?yàn)镴avaScript不能好像其它原生支持函數(shù)重載的語(yǔ)言一樣，直接寫(xiě)多個(gè)同名函數(shù)，讓編譯器來(lái)判斷某個(gè)調(diào)用對(duì)應(yīng)的是哪一個(gè)重載。說(shuō)支持，是因?yàn)镴avaScript函數(shù)對(duì)參數(shù)列表不作任何限制，可以在函數(shù)內(nèi)部模擬對(duì)函數(shù)重載的支持。
實(shí)際上，在很多著名的開(kāi)源庫(kù)當(dāng)中，我們都可以看到函數(shù)內(nèi)部模擬重載支持的設(shè)計(jì)。例如說(shuō)jQuery的jQuery.extend方法，就是通過(guò)參數(shù)類型判斷出可選參數(shù)是否存在，如果不存在的話就對(duì)參數(shù)進(jìn)行移位以確保后面的邏輯正確運(yùn)行。我相信很多人在寫(xiě)JavaScript時(shí)也寫(xiě)過(guò)類似的代碼，以求為功能豐富的函數(shù)提供一個(gè)（或多個(gè)）簡(jiǎn)單的調(diào)用入口。
不過(guò)做種做法一個(gè)根本的問(wèn)題，那就是違反了DRY原則。每個(gè)支持重載的函數(shù)內(nèi)部都多出來(lái)一段代碼，用于根據(jù)參數(shù)個(gè)數(shù)和參數(shù)類型處理重載，這些代碼暗含著重復(fù)的邏輯，寫(xiě)出來(lái)卻又每一段都不一樣。此外，這些代碼要維護(hù)起來(lái)也不容易，因?yàn)殚喿x代碼時(shí)你并不能一眼看出函數(shù)支持的幾種重載方式是什么，要對(duì)重載做出維護(hù)自然也困難。
描述重載入口的DSL
我希望能夠在JavaScript中以一種簡(jiǎn)單的方式來(lái)描述重載入口。最好就如同在其它語(yǔ)言中一樣，使用函數(shù)簽名來(lái)區(qū)分重載入口，因?yàn)槲艺J(rèn)為函數(shù)簽名就是這方面最好的DSL。我假想中最符合JavaScript語(yǔ)法的重載入口描述DSL應(yīng)該是這樣子的：
復(fù)制代碼 代碼如下:
var sum = new Overload();
sum.add("Number, Number",
function(x, y) { return x + y; });
sum.add("Number, Number, Number",
function(x, y, z) { return x + y + z; });
在描述好重載入口與對(duì)應(yīng)函數(shù)體后，對(duì)sum函數(shù)的調(diào)用應(yīng)該是這樣子的：
sum(1, 2);
sum(1, 2, 3);
上述代碼在我看來(lái)非常清晰，也非常容易維護(hù)——你可以一眼看得出重載入口的簽名，并且要修改或者增加重載入口都是很容易的事情。但是我們遇到了一個(gè)問(wèn)題，那就是JavaScript里面的函數(shù)是不能new出來(lái)的，通過(guò)new Overload()獲得的對(duì)象一定不能被調(diào)用，為此我們只能把Overload做成一個(gè)靜態(tài)類，靜態(tài)方法返回的是Function實(shí)例：
復(fù)制代碼 代碼如下:
var sum = Overload
.add("Number, Number",
function(x, y) { return x + y; })
.add("Number, Number, Number",
function(x, y, z) { return x + y + z; });
必要的重載入口支持
想象一下，有哪些常見(jiàn)的JavaScript函數(shù)入口是用上述DSL無(wú)法描述的？我所知道的有兩種：
任意類型參數(shù)
假想我們要寫(xiě)一個(gè)each函數(shù)，對(duì)于Array就迭代它的下標(biāo)，對(duì)于其它類型就迭代它的所有成員，這兩個(gè)函數(shù)入口的參數(shù)列表如何聲明？如果用C#，我們會(huì)如此描述兩個(gè)函數(shù)入口：
void Each(IEnumerable iterator) { }
void Each(object iterator) { }
然而在JavaScript當(dāng)中，Object不是一切類型的基類，(100) instanceof Object的結(jié)果為false，所以我們不能用Object來(lái)指代任意類型，必須引入一個(gè)新的符號(hào)來(lái)指代任意類型?？紤]到這個(gè)符號(hào)不應(yīng)該與任何可能存在的類名沖突，所以我選擇了用"*"來(lái)表示任意類型。上述C#代碼對(duì)應(yīng)的JavaScript應(yīng)該是這樣子的：
復(fù)制代碼 代碼如下:
var each = Overload
.add("Array",
function(array) { })
.add("*",
function(object) { });
任意數(shù)量參數(shù)
在JavaScript的函數(shù)里面，要求支持任意數(shù)量參數(shù)是很常見(jiàn)的需求，相信使用率比C#里面的params關(guān)鍵字要多得多。在我們之前制定的規(guī)則當(dāng)中，這也無(wú)法描述的，因此我們要引入一個(gè)不和類名沖突的符號(hào)來(lái)表示C#中的params。我選擇了用"..."表示params，意思是這里出現(xiàn)任意多個(gè)參數(shù)都是可以接受的。讓我們看看jQuery.extend的重載應(yīng)該如何描述：
復(fù)制代碼 代碼如下:
var extend = Overload
.add("*, ...",
function(target) { })
.add("Boolean, *, ...",
function(deep, target) { });
小結(jié)
在這篇文章當(dāng)中，我們嘗試設(shè)計(jì)出一種適用于JavaScript且易讀易維護(hù)的函數(shù)重載寫(xiě)法。在下一篇文章當(dāng)中，我們將會(huì)嘗試編寫(xiě)Overload類，以實(shí)現(xiàn)這一設(shè)計(jì)。
相關(guān)文章
在實(shí)際開(kāi)發(fā)中我們經(jīng)常需要獲取其他域的資源，本篇文章主要介紹了詳解Javascript幾種跨域方式總結(jié)，有興趣的可以了解一下。2017-02-02
js圖片閃動(dòng)特效可以控制間隔時(shí)間如幾分鐘閃動(dòng)一下
這篇文章主要介紹一個(gè)圖片閃動(dòng)特效，可以控制間隔時(shí)間如幾分鐘閃動(dòng)一下,需要的朋友不要錯(cuò)過(guò)2014-08-08
微信小程序的云開(kāi)發(fā)功能剛剛上線，這篇文章主要介紹了小程序云開(kāi)發(fā)部署攻略(圖文教程)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
這篇文章主要給大家介紹了關(guān)于微信小程序npm引入vant-weapp的踩坑記錄，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08 
JavaScript最完整的深淺拷貝實(shí)現(xiàn)方式詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript最完整的深淺拷貝實(shí)現(xiàn)方式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-02-02 
javascript簡(jiǎn)單實(shí)現(xiàn)圖片預(yù)加載
本文是給大家分享一段簡(jiǎn)單的實(shí)現(xiàn)圖片預(yù)加載技術(shù)的javascript代碼，超級(jí)精簡(jiǎn)，卻很實(shí)用，這里推薦給大家
2014-12-12 
眾所周知，JavaScript沒(méi)有塊級(jí)作用域，只有函數(shù)作用域。那就意味著定義在函數(shù)中的參數(shù)和變量在函數(shù)外部是不可見(jiàn)的，而在一個(gè)函數(shù)內(nèi)部任何位置定義的變量，在該函數(shù)內(nèi)部任何地方都可見(jiàn)
2014-04-04 
如何提升JavaScript執(zhí)行效率與性能在前端開(kāi)發(fā)中位于一個(gè)很重要的地方，這節(jié)來(lái)研究下如何在平時(shí)做項(xiàng)目過(guò)程中，提升JavaScript性能與運(yùn)行效率,需要的朋友可以參考下
2012-12-12 
設(shè)為首頁(yè)加入收藏兼容360/火狐/谷歌/IE等主流瀏覽器的代碼
不用找了我試過(guò)好多次ie、火狐、谷歌瀏覽器此代碼都是不可逆兼容，想把這個(gè)問(wèn)題完全解決，方法就是像其他主流網(wǎng)站一樣，下面是我的簡(jiǎn)單解決方案
2013-03-03