码迷,mamicode.com
首页 > Web开发 > 详细

原生js函数的伪重载

时间:2018-10-05 22:36:38      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:arguments   参数   undefined   script   入参   个数   javascrip   nts   内存   

一、我们在学习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函数的伪重载

标签:arguments   参数   undefined   script   入参   个数   javascrip   nts   内存   

原文地址:https://www.cnblogs.com/evilliu/p/9746012.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!