网易面试官：请你实现一下JS重载？可不是TS重载哦！

什么是重载

我第一次看到重载这个词还是在以前学习Java的时候，我一直觉得JavaScript是没有重载的，直到TypeScript的出现，所以我一直觉得JavaScript没有重载，TypeScript才有，但是现在看来我是错的。Owv28资讯网——每日最新资讯28at.com

我理解的重载是：同样的函数，不同样的参数个数，执行不同的代码，比如：Owv28资讯网——每日最新资讯28at.com

/** 重载*/function fn(name) {  console.log(`我是${name}`)}function fn(name, age) {  console.log(`我是${name},今年${age}岁`)}function fn(name, age, sport) {  console.log(`我是${name},今年${age}岁,喜欢运动是${sport}`)}/** 理想结果*/fn('林三心') // 我是林三心fn('林三心', 18) // 我是林三心，今年18岁fn('林三心', 18, '打篮球') // 我是林三心，今年18岁，喜欢运动是打篮球

但是直接在JavaScript中这么写，肯定是不行的，咱们来看看上面代码的实际执行结果，可以看到，最后一个fn的定义，把前面两个都给覆盖了，所以没有实现重载的效果。Owv28资讯网——每日最新资讯28at.com

我是林三心,今年undefined岁,喜欢运动是undefined我是林三心,今年18岁,喜欢运动是undefined我是林三心,今年18岁,喜欢运动是打篮球

我的做法

其实，想要实现理想的重载效果，我还是有办法的，我可以只写一个fn函数，并在这个函数中判断arguments类数组的长度，执行不同的代码，就可以完成重载的效果。Owv28资讯网——每日最新资讯28at.com

function fn() {  switch (arguments.length) {    case 1:      var [name] = arguments      console.log(`我是${name}`)      break;    case 2:      var [name, age] = arguments      console.log(`我是${name},今年${age}岁`)      break;    case 3:      var [name, age, sport] = arguments      console.log(`我是${name},今年${age}岁,喜欢运动是${sport}`)      break;  }}/** 实现效果*/fn('林三心') // 我是林三心fn('林三心', 18) // 我是林三心，今年18岁fn('林三心', 18, '打篮球') // 我是林三心，今年18岁，喜欢运动是打篮球

但是那位同学说，网易的面试官好像觉得这么实现可以是可以，但是还有没有更好的实现方法，我就懵逼了。Owv28资讯网——每日最新资讯28at.com

高端做法

经过了我的一通网上查找资料，发现了一种比较高端的做法，可以利用闭包来实现重载的效果。这个方法在JQuery之父John Resig写的《secrets of the JavaScript ninja》中，这种方法充分的利用了闭包的特性！Owv28资讯网——每日最新资讯28at.com

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(window, 'fn', (name) => console.log(`我是${name}`))addMethod(window, 'fn', (name, age) => console.log(`我是${name},今年${age}岁`))addMethod(window, 'fn', (name, age, sport) => console.log(`我是${name},今年${age}岁,喜欢运动是${sport}`))/** 实现效果*/window.fn('林三心') // 我是林三心window.fn('林三心', 18) // 我是林三心，今年18岁window.fn('林三心', 18, '打篮球') // 我是林三心，今年18岁，喜欢运动是打篮球

参考资料

• 浅谈JavaScript函数重载

本文链接：http://www.28at.com/showinfo-26-78507-0.html网易面试官：请你实现一下JS重载？可不是TS重载哦！

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： 瘫痪8年小哥植入马斯克脑机接口，狂打8小时「文明6」！Neuralink首个人类植入者直播来了

下一篇： Excel数据处理利器：C#中三款热门开源类库推荐及实例代码解析