javascript 实现函数/方法重载效果

本文介绍了在javascript中如何实现函数/方法的重载效果，主要是利用了JS函数的arguments对象来访问函数的所有参数，根据判断参数数量来进行不同的功能实现，从而模拟出函数重载的效果。

为什么要实现JS的函数重载?

在C#和JAVA等编程语言中函数重载是指在一个类中可以定义多个方法名相同但是方法参数和顺序不同的方法，以此来实现不同的功能和操作，这就是重载。JS中模拟重载也是一样的意思。

但是js本身没有重载，因为在JS中如果定义了多个相同的函数名称，那么最终只有最后一个定义的函数属于有效的函数，其他之前定义的函数都无效定义。造成此问题是由于javascript属于弱类型语言。比如下面的示例代码：

<script type="text/javascript">
    function showSum(num)
    {
        alert(num + 100);            
    }
    function showSum() {
        alert(500);
    }
    function showSum(num) {
        alert(num + 200);
    }
    showSum(100);
</script>

我们传入了参数100，最终计算结果和网页弹出框显示的是300。因此我们如果想要在JS中用上重载的效果，就必须自己模拟和实现出来。

JS如何实现函数/方法重载？

这里直接上代码:

<script type="text/javascript">
    function showSum()
    {
        //使用arguments对象模拟出重载效果
        if (arguments.length == 1)
        {            
            alert(arguments[0] + 1);
        }
        else if (arguments.length == 2)
        {
            alert(arguments[0] + arguments[1]);
        }
        else if (arguments.length == 3)
        {
            alert(arguments[0] + arguments[1] + arguments[2]);
        }
        else {
            alert('请传入参数！');
        }        
    }
    //显示101
    showSum(100);
    //显示200
    showSum(100, 100);
    //显示300
    showSum(100, 100,100);
</script>

在现实合计的方法showSum中，我们分别模拟重载3种计算方式，如果传入一个数字就加一并显示，传入两个和三个就将这些数值相加取和值并显示出来。

之所以可以使用arguments对象来实现重载，是因为js函数的参数并不是和其他语言那样必须固定声明，而是在函数内部以一个数组来表示传入的参数。也就是无论你传入多少的参数，什么类型的参数，最终所有参数在JS函数里面都是以一个arguments对象（参数数组）来表示的。所以在上面的代码中我们根据arguments对象的参数长度来判断最终要实现哪种计算方式，实现的效果和重载的效果是类似的。

而平时我们在JS中声明的函数显示命名，也是可以调用arguments对象来获取参数值，比如下面两个参数获取的值都是一样的：

<script type="text/javascript">
    function show(message)
    {
        //这里传入的message参数值和arguments[0]参数值是一样的
        alert(message);
        alert(arguments[0]);
    }
</script>

这样就很好实现了重载效果，关键就是使用js中的arguments对象。