JS函數重載的解決方案

來源:互聯網
上載者:User

在物件導向的編程中,很多語言都支援函數重載,能根據函數傳遞的不同個數、類型的參數來做不同的操作,JS對它卻不支援,需要我們額外做些小動作。
  
  在JS的函數執行內容中有一個名為arguments的有意思的變數,它以數組的形式儲存了函數執行時傳遞過來的所有參數,即使函數定義沒有定義這 麼多個形參。還有一個特別之處就是跟Array類型相比,arguments變數有且只有一個length屬性,Array的方法,例如push、pop 等,它並不具備,它只是一個“偽數組”:具有length屬性,儲存的數組能夠用數組訪問符[]來訪問,並且是唯讀不可寫。

一、對於不同個數參數的重載
  這裡應該很明白,直接用arguments函數的length屬性來判斷就可以了。


複製代碼 代碼如下:
<script type="text/javascript">
function talk(msg,handler){
     var len = arguments.length;
    //傳遞過來一個參數的時候執行
    if(len==1){
    alert("Function say:"+msg);
    }
    //傳遞過來兩個參數的時候執行
    else if(len==2){
         handler(msg);
     }
}
talk("demo");
talk("demo",function(w){alert("Handler say:"+w);});
</script>

二、對於不同類型的參數的重載 
  對於JS這樣一種動態類型的語言,這種變數聲明的隨意性淡化了嚴格的變數類型在開發人員腦子裡的重要性(PS:同樣是基於ECMA體系的,AS就引入 了變數聲明的強制類型),很多意想不到的BUG其實都是由這種變數類型的自動轉換造成的。其實JS提供了很準確的方法讓我們來嚴格檢測變數的類型,比較通 用的就是typeof方法和constructor屬性。

1、typeof variable 返回變數類型

複製代碼 代碼如下:
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);

    通過上面的測試你可以看出來,對於null,Object,Array返回的都是object類型,而使用下面的方法就可以解決這個困擾。

2.constructor屬性檢測變數類型

    JS中每個對象都有constructor屬性,它是用來引用構造此對象的函數,通過對這個引用的判斷就可以檢測變數類型了。

複製代碼 代碼如下:
temp = "say";
temp.constructor==String; //true
temp= {};
temp.constructor == Object;//true
temp= [];
temp.constructor == Array;//true

    通過上面的測試已經很容易的把Array和Object類型的變數區分開了。下面我們來對自訂的對象做個測試看看會發生什麼。

複製代碼 代碼如下:
//自訂對象
function Ball(){}
//執行個體化一個對象
var basketBall = new Ball();
basketBall.constructor==Ball; //true

    這可以說明constructor屬性對於自訂的對象一樣適用。

  在弄清楚了上面兩個方法的適用以後再來回到JS函數重載的類比上來,下面這個例子是根據參數類型來重載。

複製代碼 代碼如下:
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

附上一個很巧妙的嚴格檢測參數類型和個數的函數:

複製代碼 代碼如下:
//依據參數列表來嚴格地檢查一個變數列表的類型
function strict( types, args ) {
     //確保參數的數目和類型核匹配
     if ( types.length != args.length ) {
            //如果長度不匹配,則拋出異常
           throw "Invalid number of arguments. Expected " + types.length + ", received " + args.length + " instead.";
    }
    //遍曆每一個參數,檢查基底類型
    for ( var i = 0; i < args.length; i++ ) {
          //如JavaScript某一項類型不符,則拋出異常
          if ( args[i].constructor != types[i] ) {
                throw "Invalid argument type. Expected " + types[i].name +", received " + args[i].constructor.name + " instead.";
          }
     }
}

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

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.