原生js函數的偽重載
阿新 • • 發佈：2018-10-06
span 實現 fun html js函數 con 內存 定義函數 body
一、我們在學習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 case2: 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函數的偽重載