关于javascript:网易面试官请你实现一下JS重载可不是TS重载哦

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，根底是进阶的前提是我的初心。明天给大家讲一道题，是一道网易的面试题

• 一位同学：“如何实现JS重载？”
• 我：“JS有重载吗？不是TS才有吗?”
• 一位同学：“有的，这是网易一道面试题”
• 我：“好吧我想想哈！”

什么是重载

我第一次看到 重载 这个词还是在以前学习 Java 的时候，我始终感觉 JavaScript 是没有重载的，直到 TypeScript 的呈现，所以我始终感觉 JavaScript 没有重载， TypeScript 才有，然而当初看来我是错的。

我了解的重载是：同样的函数，不同样的参数个数，执行不同的代码，比方：

/*
* 重载
*/
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 的定义，把后面两个都给笼罩了，所以没有实现 重载 的成果

我是林三心,往年undefined岁,喜爱静止是undefined
我是林三心,往年18岁,喜爱静止是undefined
我是林三心,往年18岁,喜爱静止是打篮球

我的做法

其实，想要实现理想的 重载 成果，我还是有方法的，我能够只写一个 fn 函数，并在这个函数中判断 arguments 类数组的长度，执行不同的代码，就能够实现 重载 的成果

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岁，喜爱静止是打篮球

然而那位同学说，网易的面试官如同感觉这么实现能够是能够，然而还有没有更好的实现办法，我就懵逼了。

高端做法

通过了我的一通网上查找材料，发现了一种比拟高端的做法，能够利用 闭包 来实现 重载 的成果。这个办法在JQuery之父John Resig写的《secrets of the JavaScript ninja》中，这种办法充沛的利用了 闭包 的个性！

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函数重载