JavaScript函数重载操作实例浅析


Posted in Javascript onMay 02, 2020

本文实例讲述了JavaScript函数重载操作。分享给大家供大家参考,具体如下:

上个星期四下午,接到了网易的视频面试(前端实习生第二轮技术面试)。面了一个多小时,自我感觉面试得很糟糕的,因为问到的很多问题都很难,根本回答不上来。不过那天晚上,还是很惊喜的接到了HR面电话。现在HR面试的结果还没有出来,听说要等到下周二才出,所以再好好等几天哈。

前面说了这多的废话,现在是时候和伙伴们分享一下面试干货哈。因为二面问到的内容还挺多的,所以这里就不全部列举出来了。这里只讨论一下函数的重载。

下面是面试时的对话,“面”指面试官,“我”就是我~

面:你能说说JS怎么实现函数的重载吗?
我:因为JS的参数是可变长度的,是没有重载的!也是没必要用重载的!
面:怎么没必要使用重载?你先告诉什么是重载?
我: 重载就是一组具有相同名字、不同参数列表的函数(方法)。
面:对的,那为什么你还说JS没有重载,也没必要使用重载呢?

我当时一脸懵逼了,因为不知道面试官到底是想要考我什么,因为我记得《JS高级程序设计》里是提到过函数是没有重载的啊(后来查了一下,在第三版的66页,亲们可以自己翻开书本看看),但是现在面试官不同意我的回答啊,就是说在他看来,JS是有重载的,我不能坚持说没有重载啊。所以我就往重载的概念方向静静的思考了片刻,然后想到了使用arguments对象进行判断。于是:
我:我觉得,如果JS函数需要实现重载的话,可以根据arguments对象的length值进行判断。
面: 你可以写个例子出来给我看吗?
然后,我就在输入框里面写了如下的代码:

function overLoading() {
// 根据arguments.length,对不同的值进行不同的操作

switch(arguments.length) {


case 0:



/*操作1的代码写在这里*/



break;


case 1:



/*操作2的代码写在这里*/



break;


case 2:



/*操作3的代码写在这里*/
 




//后面还有很多的case......
}
 
}

我把代码发给了面试官。

面:对,这就是重载的一种实现的方法!不过你能不能想出一个更好的方法呢?
我: 暂时就想到这一种方法了。

好吧,跟面试官的对话就写这么多了。他说问我能不能想出一个更好的办法,意味着肯定还有其他我不知道的方法。所以,后来就开始翻书本查找。哈哈,终于在JQuery之父John Resig写的《secrets of the JavaScript ninja》找到了一个绝佳巧妙的方法!那种方法充分的利用了闭包的特性!

在介绍这个方法之前,我们先来看看外国人名字组成哈,比如,John Resig,John是first-name,Resig是last-name,就相当于我们的姓名由姓和名组成一样。

我们现在有这样的一个需求,有一个people对象,里面存着一些人名,如下:

var people = {
 values: ["Dean Edwards", "Sam Stephenson", "Alex Russell", "Dean Tom"]
};

我们希望people对象拥有一个find方法,当不传任何参数时,就会把people.values里面的所有元素返回来;当传一个参数时,就把first-name跟这个参数匹配的元素返回来;当传两个参数时,则把first-name和last-name都匹配的才返回来。因为find方法是根据参数的个数不同而执行不同的操作的,所以,我们希望有一个addMethod方法,能够如下的为people添加find的重载:

addMethod(people, "find", function() {}); /*不传参*/
addMethod(people, "find", function(a) {}); /*传一个*/
addMethod(people, "find", function(a, b) {}); /*传两个*/

这时候问题来了,这个全局的addMethod方法该怎么实现呢?John Resig的实现方法如下,代码不长,但是非常的巧妙:

function addMethod(object, name, fn) {
var old = object[name]; //把前一次添加的方法存在一个临时变量old里面

object[name] = function() { // 重写了object[name]的方法


// 如果调用object[name]方法时,传入的参数个数跟预期的一致,则直接调用


if(fn.length === arguments.length) {



return fn.apply(this, arguments);


// 否则,判断old是否是函数,如果是,就调用old


} else if(typeof old === "function") {



return old.apply(this, arguments);


}

}
}

现在,我们一起来分析一个这个addMethod函数,它接收3个参数,第一个为要绑定方法的对象,第二个为绑定的方法名称,第三个为需要绑定的方法(一个匿名函数)。函数体的的分析已经在注释里面了。

OK,现在这个addMethod方法已经实现了,我们接下来就实现people.find的重载啦!全部代码如下:

//addMethod
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"]
};
 
/* 下面开始通过addMethod来实现对people.find方法的重载 */
 
// 不传参数时,返回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"]

好啦,实现JS函数重载就写这么多啦,如果亲们有更好的实现方法,欢迎评论交流哈~

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
做网页的一些技巧(续)
Feb 01 Javascript
Javascript的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
文字不间断滚动(上下左右)实例代码
Apr 21 Javascript
JQuery实现鼠标滑过显示导航下拉列表
Sep 12 Javascript
node.js中的fs.appendFile方法使用说明
Dec 17 Javascript
js+html5实现可在手机上玩的拼图游戏
Jul 17 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
详解AngularJS控制器的使用
Mar 09 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 10 Javascript
JS通过位运算实现权限加解密
Aug 14 Javascript
Vuex 快速入门(简单易懂)
Sep 20 Javascript
在vue项目中封装echarts的步骤
Dec 25 Vue.js
有趣的JavaScript隐式类型转换操作实例分析
May 02 #Javascript
react-router-dom 嵌套路由的实现
May 02 #Javascript
在react中使用vue的状态管理的方法示例
May 02 #Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
May 01 #Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
May 01 #Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 #jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 #jQuery
You might like
php中转义mysql语句的实现代码
2011/06/24 PHP
谈谈PHP中substr和substring的正确用法及相关参数的介绍
2015/12/16 PHP
PHP连接数据库实现注册页面的增删改查操作
2016/03/27 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
js如何实现设计模式中的模板方法
2013/07/23 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
JSON简介以及用法汇总
2016/02/21 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
js中实例与对象的区别讲解
2019/01/21 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
[04:45]DOTA2上海特级锦标赛主赛事第四日RECAP
2016/03/06 DOTA
Python解析、提取url关键字的实例详解
2018/12/17 Python
python opencv摄像头的简单应用
2019/06/06 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
Python 切分数组实例解析
2019/11/07 Python
python pygame实现球球大作战
2019/11/25 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
《赶海》教学反思
2014/04/20 职场文书
村委会贫困证明范文
2014/09/21 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python