实现函数重载 | 青训营笔记

62 阅读2分钟

有的时候涉及到一些类似的函数功能,却要起多个函数名的时候确实是很烦,我们知道在java中存在函数重载,那么如何用js实现一个函数重载呢?\n\nconst searcher = {}\nsearch.findAll = () => {\n    console.log("查询所有用户");\n}\nsearch.findName = (name) => {\n    console.log("按照姓名查询用户");\n}\nsearch.findFirstandLastName = (firstName,lastName) => {\n    console.log("按照姓和名查询用户");\n}\n \n我们想要: \n\nconst searcher = {}\nsearch.find = () => {\n    console.log("查询所有用户");\n}\nsearch.find = (name) => {\n    console.log("按照姓名查询用户");\n}\nsearch.find = (firstName,lastName) => {\n    console.log("按照姓和名查询用户");\n}\n可以发现不管怎么调用,传入几个参数都只会打印“按照姓和名查询用户”,被最后一个函数覆盖掉了。\n\n想出用一个办法,当需要调用的时候,先调用这个方法来创建函数,将调用的对象,函数以及函数的实现传入addMethod方法。\n\nconst searcher = {}\n \naddMethod(searcher,'find',() => {\n    console.log("查询所有用户");\n});\n \naddMethod(searcher,'find',() => {\n    console.log("按照姓名查询用户");\n});\n \naddMethod(searcher,'find',() => {\n    console.log("按照姓和名查询用户");\n});\n \nsearcher.find();\n那么接下来就是如何实现这个方法呢?\n\nconst searcher = {}\n \naddMethod(searcher,'find',() => {\n    console.log("查询所有用户");\n});\n \naddMethod(searcher,'find',() => {\n    console.log("按照姓名查询用户");\n});\n \naddMethod(searcher,'find',() => {\n    console.log("按照姓和名查询用户");\n});\n \nfunction addMethod(object,name,fn){\n    const old = object[name];\n    object[name] = function(...args){\n        if(args.length === fn.length){\n            return fn.apply(this,args);\n        }\n        else if(typeof old === 'function'){\n            return old.apply(this,args);\n        }\n    };\n}\n \nsearch.find("hello");\n第一次调用:形参数量为0,运行...否则停止。\n\n第二次调用:形参数量为1,运行...否则:\n\n第三次调用:形参数量为2,运行...否则:\n\n最后定格在第三次调用 可能看还不是非常理解,大家都快去试试吧!