妙用緩存調用鏈實現(xiàn)JS方法的重載
來自于我的博客http://sweets.cf/,轉載注明出處
1.什么是方法重載
方法重載是指在一個類中定義多個同名的方法,但要求每個方法具有不同的參數(shù)的類型或參數(shù)的個數(shù)。
簡而言之就是:方法重載就是方法名稱重復,加載參數(shù)不同。
具體看請左轉: 方法重載/百度百科
那么js如何實現(xiàn)這個呢???
2. js如何實現(xiàn)?
首先javascript是沒有重載函數(shù)/方法這個概念的,但是js提供了一個arguments這個方法參數(shù),通過這個參數(shù)的length屬性就可以拿到方法參數(shù)的長度,o對了,咱們今天實現(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個方法就需要10個分支而且很不好維護因為每個方法體都在case下,或者單獨提出來寫成一個function
然后這些都是不好的不易維護的,逼格不夠高的那么咱們應該如何優(yōu)雅的實現(xiàn)對于不同參數(shù)的同一方法名的處理呢?
這就用到這個 apply 這個方法了.
咱們?yōu)閟even編寫一個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
});
咱們要增加方法,只需要調用這個addMethod方法就ok了,是不是覺得簡單明了,更加清晰。
那么這段代碼的原理呢,其實也很簡單,就是緩存舊方法,然后根據(jù)參數(shù)長度依次apply鏈式調用,直到找到和當前參數(shù)等長的方法~然后進行調用。
func 和 old 很有可能讓初來乍到的童鞋們迷惑,其實不然,這里巧妙的使用了JavaScript語言的特性,這個old每一次保存的都是上一次方法的引用,
而且每次都是全新的,而舊的old又保持著引用,這是什么呢?閉包嘍~。

浙公網(wǎng)安備 33010602011771號