JS函数重载

@Planner

已于 2023-09-07 16:50:13 修改

阅读量293

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-07-19 01:53:39 首次发布

本文链接：https://blog.csdn.net/m0_68320270/article/details/131799590

版权

函数重载是一种编程技术，它允许程序员定义多个同名函数，但这些函数可以接受不同类型和数量的参数。通过函数重载，程序员可以简化代码，提高代码的可读性和可维护性。

可以用参数的数量或者参数的类型实现函数的重载

方法一：

通过Map方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数重载</title>
</head>

<body>

    <script>
        function creatOverLoad() {
            // 设置key，value值； 通过调用key 执行相应的方法
            let myMap = new Map()

            function overLoad(...arg) {
                let key = arg.map(item => typeof item).join('-')
                let fn = myMap.get(key)

                if (fn) {
                    return fn.apply(this, arg)
                }
                // 没有对应方法
                throw new Error('没有对应的方法')
            }

            // 设置myMap
            overLoad.addProperty = function (...arg) {
                //  提取方法   
                let fn = arg.pop()
                if (typeof fn != 'function') return

                // 根据参数类型 设置key
                let key = arg.join('-')    //'String-Number'    arg为空时 也能执行join
                myMap.set(key, fn)
            }

            return overLoad
        }

        let getUser = creatOverLoad()

        // 注入方法
        getUser.addProperty('string','number',(property,value)=>{
            console.log(property + ':'+value)
        })

        getUser.addProperty('number','number',(value1,value2)=>{
            console.log(value1+'+'+value2+'='+(value1+value2))
        })

        getUser('age',18)      // age:18
        getUser('身高',185)    // 身高:185
        getUser(15,25)        // 15+25=40
        
    </script>
</body>

</html>

方法二：

通过递归

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数重载</title>
</head>

<body>
    <script>

        function addMethod(obj, name, fn) {
            // 保存上一个的函数
            const old = obj[name];

            // 创建新方法
            obj[name] = function (...args) {

                if (args.length === fn.length) {

                    return fn.apply(this, args);
                } else if (typeof old === 'function') {

                    // 保存了旧方法 当上面长度条件不满足时，执行上一次的函数
                    return old.apply(this, args)
                }
            }
        }

        let obj123 = {}

        addMethod(obj123, 'say', () => {
            console.log('没有参数')
        })

        addMethod(obj123, 'say', (a = 1, b = 2) => {
            console.log('一个参数')
        })

        addMethod(obj123, 'say', (a) => {
            console.log('两个参数')
        })

        obj123.say()        //没有参数
        obj123.say(666)    //一个参数
    </script>
</body>

</html>

简单说明下：在每次调用addMethod方法时，用old变量保存上次的say方法，在覆盖，重写新的say方法，重写的say方法中，调用了old方法，执行上一次的旧say。

每当say的形参长度不等于回调的形参长度，就会执行上一次的say方法...一直循环