JS函數(shù)重載的解決方案

2019-11-20 15:27:31

字體：大中小

供稿：網(wǎng)友

在面向?qū)ο蟮木幊讨校芏嗾Z(yǔ)言都支持函數(shù)重載，能根據(jù)函數(shù)傳遞的不同個(gè)數(shù)、類型的參數(shù)來(lái)做不同的操作，JS對(duì)它卻不支持，需要我們額外做些小動(dòng)作。
　　
　　在JS的函數(shù)執(zhí)行上下文中有一個(gè)名為arguments的有意思的變量，它以數(shù)組的形式存儲(chǔ)了函數(shù)執(zhí)行時(shí)傳遞過(guò)來(lái)的所有參數(shù)，即使函數(shù)定義沒(méi)有定義這么多個(gè)形參。還有一個(gè)特別之處就是跟Array類型相比，arguments變量有且只有一個(gè)length屬性，Array的方法，例如push、pop 等，它并不具備，它只是一個(gè)“偽數(shù)組”：具有l(wèi)ength屬性，存儲(chǔ)的數(shù)組能夠用數(shù)組訪問(wèn)符[]來(lái)訪問(wèn)，并且是只讀不可寫(xiě)。

一、對(duì)于不同個(gè)數(shù)參數(shù)的重載
　　這里應(yīng)該很明白，直接用arguments函數(shù)的length屬性來(lái)判斷就可以了。

復(fù)制代碼代碼如下:

<script type="text/javascript">
function talk(msg,handler){ 
     var len = arguments.length; 
    //傳遞過(guò)來(lái)一個(gè)參數(shù)的時(shí)候執(zhí)行 
    if(len==1){ 
    alert("Function say:"+msg); 
    } 
    //傳遞過(guò)來(lái)兩個(gè)參數(shù)的時(shí)候執(zhí)行 
    else if(len==2){ 
         handler(msg); 
     } 
} 
talk("demo"); 
talk("demo",function(w){alert("Handler say:"+w);}); 
</script> 

二、對(duì)于不同類型的參數(shù)的重載
　　對(duì)于JS這樣一種動(dòng)態(tài)類型的語(yǔ)言，這種變量聲明的隨意性淡化了嚴(yán)格的變量類型在開(kāi)發(fā)人員腦子里的重要性（PS:同樣是基于ECMA體系的，AS就引入了變量聲明的強(qiáng)制類型），很多意想不到的BUG其實(shí)都是由這種變量類型的自動(dòng)轉(zhuǎn)換造成的。其實(shí)JS提供了很準(zhǔn)確的方法讓我們來(lái)嚴(yán)格檢測(cè)變量的類型，比較通用的就是typeof方法和constructor屬性。

1、typeof variable 返回變量類型

復(fù)制代碼代碼如下:

temp = "say"; //string 
temp = 1; //number 
temp = undefined; //undefined 
temp = null; //object 
temp = {}; //object 
temp = []; //object 
temp = true; //boolean 
temp = function (){} //function 
alert(typeof temp); 

通過(guò)上面的測(cè)試你可以看出來(lái)，對(duì)于null,Object,Array返回的都是object類型，而使用下面的方法就可以解決這個(gè)困擾。

2.constructor屬性檢測(cè)變量類型

JS中每個(gè)對(duì)象都有constructor屬性，它是用來(lái)引用構(gòu)造此對(duì)象的函數(shù)，通過(guò)對(duì)這個(gè)引用的判斷就可以檢測(cè)變量類型了。

復(fù)制代碼代碼如下:

temp = "say"; 
temp.constructor==String; //true 
temp= {}; 
temp.constructor == Object;//true 
temp= []; 
temp.constructor == Array;//true 

通過(guò)上面的測(cè)試已經(jīng)很容易的把Array和Object類型的變量區(qū)分開(kāi)了。下面我們來(lái)對(duì)自定義的對(duì)象做個(gè)測(cè)試看看會(huì)發(fā)生什么。

復(fù)制代碼代碼如下:

//自定義對(duì)象 
function Ball(){} 
//實(shí)例化一個(gè)對(duì)象 
var basketBall = new Ball(); 
basketBall.constructor==Ball; //true 

這可以說(shuō)明constructor屬性對(duì)于自定義的對(duì)象一樣適用。

　　在弄清楚了上面兩個(gè)方法的適用以后再來(lái)回到JS函數(shù)重載的模擬上來(lái)，下面這個(gè)例子是根據(jù)參數(shù)類型來(lái)重載。

復(fù)制代碼代碼如下:

function talk(msg){ 
     var t = typeof msg; 
     if(t=="string"){ 
            alert("It's a string"); 
    } 
    else if(t=="number"){ 
            alert("It's a number"); 
     } 
} 
talk(10); //It's a string 
talk("demo"); //It's a number 

附上一個(gè)很巧妙的嚴(yán)格檢測(cè)參數(shù)類型和個(gè)數(shù)的函數(shù)：

復(fù)制代碼代碼如下:

//依據(jù)參數(shù)列表來(lái)嚴(yán)格地檢查一個(gè)變量列表的類型
function strict( types, args ) {
     //確保參數(shù)的數(shù)目和類型核匹配
     if ( types.length != args.length ) {
            //如果長(zhǎng)度不匹配，則拋出異常
           throw "Invalid number of arguments. Expected " + types.length + ", received " + args.length + " instead.";
    }
    //遍歷每一個(gè)參數(shù)，檢查基類型
    for ( var i = 0; i < args.length; i++ ) {
          //如JavaScript某一項(xiàng)類型不匹配，則拋出異常
          if ( args[i].constructor != types[i] ) {
                throw "Invalid argument type. Expected " + types[i].name +", received " + args[i].constructor.name + " instead.";
          }
     }
}

//上述方法的使用
function doFunction(id,name){
//檢測(cè)參數(shù)個(gè)數(shù)和類型
strict([Number,String],arguments);
..
}

上一篇：javascript中expression的用法整理

下一篇：一個(gè)JS函數(shù)搞定網(wǎng)頁(yè)標(biāo)題(title)閃動(dòng)效果