一、我们在学习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函数的伪重载
原文地址:https://www.cnblogs.com/evilliu/p/9746012.html