JS函式過載解決方案

Web開發者發表於2011-12-24

  JS的函式定義可以指定形式引數名稱,多多少少我們會以為js至少可以支援引數個數不同的方法過載,然而遺憾的是這僅僅是一個假象,js所有的引數都是以arguments傳遞過去的,這個引數類似於陣列,在函式呼叫的時候,所有的實參都是儲存在了這個資料結構裡面,我們定義函式的時候所指定的形式引數其實是為這個資料結構裡面的資料定義一個快捷的訪問方式。也就是說js所有的函式都是支援無限個引數的,加上資料型別是弱型別,那麼JS的函式除了名稱就真的沒有方法區別了?

  辦法總是有的,我們可以利用JavaScript中的特殊物件arguments來模擬函式過載。用它來判斷傳入引數的個數或型別以區分過載。

1.根據引數個數過載

js判斷傳入引數數量可以用arguments.length這個屬性來判斷;

<script type="text/javascript">
function add() {
    if (arguments.length == 1) {
        alert(arguments[0] + 10);
    }
    else if (arguments.length == 2) {
        alert(arguments[0] + arguments[1]);
    }
}
//函式呼叫
add(10);
add(10, 20);
</script>

2.根據引數型別過載

判斷變數型別的3種方法:
1.用 typeof 語句判斷變數型別,typeof語句返回型別對應的字串。
2.用 instanceof 語句判斷變數型別,instanceof語句返回true/false。
3.用 constructor 屬性判斷變數型別,這個屬性返回用來構造該變數的建構函式引用。
對照表:可以看出用 typeof 不能準確的判斷出具體的型別,所以我們用 constructor 來進行判斷。

typeof string number object function boolean object object
constructor String Number Object Function Boolean Array User Define
<script type="text/javascript">
function add() 
{
    if (arguments.length == 0) return 0;
    var sum=0;
    for(var i=0; i<arguments.length; i++){
        if(arguments[i].constructor == Number){
        //或者改為:if(arguments[i] instanceof Number)
        //或者改為:if(typeof(arguments[i])=="number")
        sum += arguments[i];
      }
    }
    return sum;
}
//函式呼叫
alert(add(10));
alert(add(10,20));
</script>

相關文章