原生js函数的伪重载

Posted evil_liu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生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函数的伪重载的主要内容,如果未能解决你的问题,请参考以下文章

js经常用到的代码片段

原生js禁止页面滚动

原生js如何绑定a连接点击事件?

Atom编辑器折腾记_(15)JS代码片段补全(插件:javascript-snippets)

C/C++编程笔记:C++中的函数重载和浮动

从代码行中删除变量名(JS 中的伪代码)