详解JS函数重载

作者:异步漫步

时间:2026-10-28

浏览:307

JavaScript原生不支持函数重载,但可通过arguments对象模拟。本文详解利用参数个数和类型(constructor、instanceof、typeof)实现重载的两种核心方法,并提供完整代码示例与注意事项。

文章目录

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函数重载的方法了呢,有疑问就留言吧

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章