js中函数重载详解以及两种实现方式
2019-09-23 23:20
1116 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/apple_2021/article/details/101231857
1. 什么是重载 ?
函数或方法有相同的名称,但是参数序列却不相同,这种同名不同参数的函数或者方法称为重载。
2. js中函数是否有重载呢 ?
答案是没有,因为在js中,如果出现同名函数,后面的函数会覆盖前面的函数。代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> function fn(a,b,c){ console.log(a*b*c); } function fn(a,b){ console.log(a+b); } fn(1,2); // 3 (进行了1+2计算) fn(1,2,3) //3 (只获取了arguments列表的前两项) </script> </body> </html>
可以看出调用函数,不管是传两个参数还是三个参数,都在调用最后一个fn函数。
注意:若函数位置调换,则输出分别为 NaN,6
3.怎么实现重载的效果?
(1)arguments
实参都存放在arguments这个类数组中。我们可以通过arguments的长度,执行不同的代码,实现重载的效果。
例:传入两个参数就相加,传入三个参数就相乘。(代码如下)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> function fn(){ if(arguments.length == 2){ console.log(arguments[0] + arguments[1]); }else if(arguments.length == 3){ console.log(arguments[0] * arguments[1] * arguments[2]); } } fn(1,2); // 3 fn(1,2,3); // 6 </script> </body> </html>
(2)闭包实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> function addMethod(object, name, fn) { var old = object[name]; object[name] = function() { if(fn.length === arguments.length) { return fn.apply(this, arguments); } else if(typeof old === "function") { return old.apply(this, arguments); } } } var people = { values: ["Dean Edwards", "Alex Russell", "Dean Tom"] }; // 不传参数时,返回peopld.values里面的所有元素 addMethod(people, "find", function() { return this.values; }); // 传一个参数时,按first-name的匹配进行返回 addMethod(people, "find", function(firstName) { var ret = []; for(var i = 0; i < this.values.length; i++) { if(this.values[i].indexOf(firstName) === 0) { ret.push(this.values[i]); } } return ret; }); // 传两个参数时,返回first-name和last-name都匹配的元素 addMethod(people, "find", function(firstName, lastName) { var ret = []; for(var i = 0; i < this.values.length; i++) { if(this.values[i] === (firstName + " " + lastName)) { ret.push(this.values[i]); } } return ret; }); console.log(people.find()); //["Dean Edwards", "Alex Russell", "Dean Tom"] console.log(people.find("Dean")); //["Dean Edwards", "Dean Tom"] console.log(people.find("Dean Edwards")); //["Dean Edwards"] </script> </body> </html>
相关文章推荐
- Spring 详解(二)------- AOP关键概念以及两种实现方式
- 详解多线程的两种实现方式以及4个线程,两个线程对j加1,两个线程对j减1完整代码。
- JAVA 实现线程的两种方式,举例,详解
- Spring定时器配置的两种实现方式OpenSymphony Quartz和java Timer详解
- js实现小球抛物线轨迹运动的两种方式
- Java中有两种实现多线程的方式以及两种方式之间的区别
- 实现死锁的两种方式以及ReentrantLock的额外功能(未完待续)
- Spring boot实现热部署的两种方式详解
- Android开发之常用的loading等待效果实现,仿微博等待动画。两种实现方式详解
- Java中有两种实现多线程的方式以及两种方式之间的区别
- 数据结构四:栈的两种形式LinkStack和SeqStack用线性表的实现方式,以及SeqQueue和LinkQueue的实现
- hibernate映射详解:一对一映射的两种实现方式
- Java中有两种实现多线程的方式以及两种方式之间的区别
- SpringMVC实现Action的两种方式以及与Struts2的区别
- 线程的两种实现方式,以及区别
- Java中有两种实现多线程的方式以及两种方式之间的区别
- 详解Java两种方式简单实现:爬取网页并且保存
- Linux下chkconfig命令详解即添加服务以及两种方式启动关闭系统服务
- 用JS实现点击列表弹出列表索引的两种方式
- Java中有两种实现多线程的方式以及两种方式之间的区别