前言
大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,根底是进阶的前提是我的初心。明天给大家讲一道题,是一道网易的面试题
- 一位同学:“如何实现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函数重载