原生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函数的伪重载的主要内容，如果未能解决你的问题，请参考以下文章