原生js函数的伪重载

一、我们在学习java的时候，其中方法有一个比较的重要的特性重载，根据传入的参数的个数来执行不同的方法，而方法其根据签名来判断，而JavaScript却不能根据方法的签名来进行重载，只能通过参数的个数的来进行实现伪重载。

在函数体中有个对象arguments，记录调用函数的传入的参数的对象：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5 </head>
 6 <body>
 7 <script type="text/javascript">
 8     function reloadFunc(ar1,ar2,ar3){
 9             console.log(arguments);
10             console.log(typeof arguments);
11     };
12     reloadFunc('a','b')
13 </script>
14 </body>
15 </html>

输出：

1 Arguments(2) ["a", "b", callee: ƒ, Symbol(Symbol.iterator): ƒ]0: "a"1: "b"callee: ƒ reloadFunc(ar1,ar2,ar3)length: 2Symbol(Symbol.iterator): ƒ values()__proto__: Object

我们可以在定义函数函数的不显示的显示参数，通过传入arguments的长度来判断参数。

 1     function reloadFunc(){
 2         switch(arguments.length){
 3             case 1:
 4             console.log("一个参数!");
 5             break;
 6             case 2:
 7             console.log("两个参数!");
 8             break;
 9             case 3:
10             console.log('三个参数!');
11             break;
12             default:
13             console.log('未传入参数!')
14         }
15     };
16     reloadFunc('a','b');
17     reloadFunc();
18     reloadFunc(1,2,3)

等同于：

 1 <script type="text/javascript">
 2     function reloadFunc(ar1,ar2,ar3){
 3         switch(arguments.length){
 4             case 1:
 5             console.log("一个参数!");
 6             break;
 7             case 2:
 8             console.log("两个参数!");
 9             break;
10             case 3:
11             console.log('三个参数!');
12             break;
13             default:
14             console.log('未传入参数!')
15         }
16     };
17     reloadFunc('a','b');
18     reloadFunc();
19     reloadFunc(1,2,3)
20 </script>

注意：1、当我们显示定义了参数之后，如果传入的参数个数小于我们显示定义参数，默认缺省参数为undefined的。

　　　2、arguments的对象和函数的参数是不同的内存空间，我们可以通过arguments修改参数。

　　　3、通过arguments修改参数的时候，可以反射对应的变量，但是arguments的长度在调用该函数的时候，就已经决定了。如果我们修改arguments的不存在的索引的变量值并不能反射到对应变量，依然是undefined的：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5 </head>
 6 <body>
 7 <script type="text/javascript">
 8     function reloadFunc(ar1,ar2,ar3){
 9         arguments[3]=2;
10         console.log(ar3);
11     };
12     reloadFunc('a','b');
13 </script>
14 </body>
15 </html>

输出：

1 undefined

我们可以通过下标访问arguments对象：

1 <script type="text/javascript">
2     function reloadFunc(ar1,ar2,ar3){
3             console.log(arguments);
4             console.log(typeof arguments);
5             console.log(arguments[0],arguments[1])
6     };
7     reloadFunc('a','b')
8 </script>

我们可以通过判断该对象的长度来进行方法的重载。

 1 <script type="text/javascript">
 2     function reloadFunc(ar1,ar2,ar3){
 3         switch(arguments.length){
 4             case 1:
 5             console.log("一个参数!");
 6             break;
 7             case 2:
 8             console.log("两个参数!");
 9             break;
10             case 3:
11             console.log('三个参数!');
12             break;
13             default:
14             console.log('未传入参数!')
15         }
16     };
17     reloadFunc('a','b');
18     reloadFunc();
19     reloadFunc(1,2,3)
20 </script>

输出：

1 两个参数!
2 函数重载.html:20 未传入参数!
3 函数重载.html:17 三个参数!

我们可以判断传入的参数的长度来决定一个执行的不同的代码块。实现类似的java的伪重载。

原生js函数的伪重载

猜你喜欢