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 相关文章推荐
javascript 获取iframe里页面中元素值的方法
Feb 17 Javascript
使用javascript获取页面名称
Dec 23 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
详解AngularJS中的作用域
Jun 17 Javascript
jQuery实现判断滚动条到底部
Jun 23 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
es6中let和const的使用方法详解
Feb 24 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 Javascript
vue在图片上传的时候压缩图片
Nov 18 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
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
用js 让图片在 div或dl里 居中,底部对齐
2008/01/21 Javascript
javascript实现简单的Map示例介绍
2013/12/23 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
简介JavaScript中getUTCMonth()方法的使用
2015/06/10 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
2016/09/04 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
2017/04/19 Javascript
Angularjs2不同组件间的通信实例代码
2017/05/06 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
2018/04/21 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
Python切片用法实例教程
2014/09/08 Python
Python的Django框架中settings文件的部署建议
2015/05/30 Python
分析用Python脚本关闭文件操作的机制
2015/06/28 Python
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
Django开发中的日志输出的方法
2018/07/02 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
Python中三元表达式的几种写法介绍
2019/03/04 Python
python实现文件的备份流程详解
2019/06/18 Python
python如何保证输入键入数字的方法
2019/08/23 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
十八大报告观后感
2014/01/28 职场文书
幼儿教师国培感言
2014/02/19 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
导师工作推荐信范文
2014/05/17 职场文书
计划生育诚信协议书
2014/11/02 职场文书
法人代表资格证明书
2015/06/18 职场文书
2016年五一促销广告语
2016/01/28 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书
一篇文章弄懂Python中的内建函数
2021/08/07 Python