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 相关文章推荐
Js中sort()方法的用法
Nov 04 Javascript
DOM 基本方法
Jul 18 Javascript
Javascript学习笔记4 Eval函数
Jan 11 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
jquery获得当前html页面源码的方法
Jul 14 Javascript
全面了解函数声明与函数表达式、变量提升
Aug 09 Javascript
浅谈vue中数据双向绑定的实现原理
Sep 14 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
Oct 20 Javascript
vscode配置vue下的es6规范自动格式化详解
Mar 20 Javascript
webpack4 optimization使用总结
Nov 10 Javascript
vue v-model的用法解析
Oct 19 Javascript
有趣的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编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
php利用腾讯ip分享计划获取地理位置示例分享
2014/01/20 PHP
php实现将Session写入数据库
2015/07/26 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
Javascript this指针
2009/07/30 Javascript
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
JavaScript 原型链学习总结
2010/10/29 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
jQuery实现的表格展开伸缩效果实例
2016/09/07 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
JS实现json的序列化和反序列化功能示例
2017/06/13 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
python复制与引用用法分析
2015/04/08 Python
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
python如何编写类似nmap的扫描工具
2020/11/06 Python
python 基于wx实现音乐播放
2020/11/24 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
2014/04/10 HTML / CSS
html5简介及新增功能介绍
2020/05/18 HTML / CSS
英国IT硬件供应商,定制游戏PC:Mesh Computers
2019/03/28 全球购物
幼儿园实习生辞职信
2014/01/20 职场文书
社区包粽子活动方案
2014/01/21 职场文书
法学毕业生自我鉴定
2014/01/31 职场文书
经典团队口号大全
2014/06/21 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
主持人开幕词
2015/01/29 职场文书
详细介绍python操作RabbitMq
2022/04/12 Python
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android