乐趣区

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

jiezi

前言

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

  • 一位同学：“如何实现 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 函数重载
退出移动版