详解JS函数重载

JavaScript函数重载原理

JavaScript允许在定义函数时指定形式参数名，这容易让人误以为JS支持基于参数数量不同的方法重载。实际上，这是一种错觉。JS中所有参数均通过arguments对象传递，该对象类似数组，函数调用时的所有实参都存储其中。定义的形式参数仅为访问该数据结构提供快捷方式。因此，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>

小伙伴们是否理解了javascript函数重载的方法了呢，有疑问就留言吧