分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

原生js函数的伪重载

发布时间:2023-09-06 02:17责任编辑:董明明关键词: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函数的伪重载

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved