js函数的重载

最新推荐文章于 2023-07-19 01:53:39 发布

HainesFreeman

最新推荐文章于 2023-07-19 01:53:39 发布

阅读量2.9k

点赞数

分类专栏： js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_41829196/article/details/122682156

版权

js 专栏收录该内容

91 篇文章 2 订阅

订阅专栏

猜测
Java中的方法（函数）重载：类里面的两个或多个重名的方法，方法的参数个数、类型至少有一个不一样，构成了方法重载。

由于js参数类型都为var，我们由此提出大胆猜测：js函数重载只能通过形参的个数不同来区分。

验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js函数重载</title>
</head>
<body>
    <script type="text/javascript">
        
        function add(){
            document.writeln("没有参数，你让我加什么？")
        }
        function add(a,b){
            return a+b;
        }
        function add(a,b,c) {
            return a+b+c;
        }
    
        document.writeln(add());
        document.writeln(add(1,2));
        document.writeln(add(2,3,4));

    </script>
</body>
</html>

在这里插入图片描述

再尝试

这个输出结果看的我一脸懵，没事，再来尝试一下别的：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js函数重载</title>
</head>
<body>
	<script type="text/javascript">
	function comeon() {
		document.writeln("无参一身轻");
		document.write("<br>");
	}
	function comeon(i) {
		document.writeln("一参是为"+i);
		document.write("<br>");
	}
	function comeon(i,j){
		document.writeln("二参数更有"+i+"和"+j);
		document.write("<br>");
	}

	comeon();
	comeon(1);
	comeon(1,2);
	</script>
</body>
</html>

在这里插入图片描述

结论：

相同名称的函数调用多次，会发生函数的覆盖，最终会调用最后那个函数。

如何模拟实现js的重载？

虽然我们刚刚的猜想被否定了，但对于本文的第一段代码，能不能对其做一些修改，来达到重载的效果呢？也就是模拟重载。我们自然而然想到，我们能不能够获取函数调用时实参的个数，然后用一个无形参的函数实现与猜想中重载相同的效果呢？

那么，无参函数可以接收调用时给的实际参数吗？听起来有点荒谬，没想到还真可以，js的arguments对象可以接收函数调用时的实参，因此，实参多于形参，甚至没有形参时，程序都不会报错，反正你给多少实参我都收着，来者不拒，来一个在我这儿是arguments[0]，来第二个是arguments[1]，依次类推。arguments对象的length属性，可以获取函数的实参个数。

接下来就好办了：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js模拟重载</title>
</head>
<body>
	<script type="text/javascript">

	//arguments对象可接收实参，arguments对象的length属性可获取实参个数。
	function add(){
		if(arguments.length==0){
			document.writeln("没有参数，你让我加什么？");
			document.write("<br>");
		}
		else if(arguments.length==1){
			document.writeln(arguments[0]);
			document.write("<br>");
		}
		else
		{
			var n = 0;
			len = arguments.length;
			for (var i = 0; i < len; i++) {
				n+=arguments[i];
			}
			document.writeln(n);
			document.write("<br>");
		}
	}
	
	add();
	add(1);
	add(1,2);
	add(1,2,3);
	</script>
</body>
</html>

在这里插入图片描述