JavaScript函数重载

发布时间:2019-06-21 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了JavaScript函数重载脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

JavaScript实现函数重载

函数重载(function overloading),是 Ada、C++、C#、D、Java等编程语言中具有的一项特性,这项特性允许创建数项名称相同但输入输出类型或个数不同的子程序,它可以简单地称为一个单独功能可以执行多项任务的能力。维基百科-函数重载

函数重载是强类型语言的特性,虽然 js 是弱类型语言,我们可以通过一些方法实现函数重载。

场景

班级中有很多学生,通过姓名要找到某个学生或多个学生时,同一个方法传入的参数个数的不同去查找同学

const classRoom = {
    students: ['武大', '郎二', '张三', '张起灵', '李四', '王五'],
}

classRoom.find(); // ['武大', '郎二', '张三', '张起灵', '李四', '王五'];
classRoom.find('张'); // ['张三', '张起灵'];
classRoom.find('张', '三'); // ['张三'];
  • find()方法不传入参数时,输出班级所有学生。
  • find()方法传一个参数(姓),输入班级相同姓的学生。
  • find()方法传两个个参数(姓,名),输入班级相同姓名的学生。

第一种

我们使用 arguments 和 swITch 实现重载。

classRoom.find = function() {
    switch(arguments.length) {
        case 0:
            return this.students;
        case 1:
            return this.students.filter(student => {
                let surname = arguments[0];
                return ~student.indexOf(surname);
            });
        case 2:
            return this.students.filter(student => {
                let fullName = Array.prototype.slice.call(arguments).join('');
                return ~student.indexOf(fullName);
            });
    }
}

console.log(classRoom.find()); // [ '武大', '郎二', '张三', '张起灵', '李四', '王五' ]
console.log(classRoom.find('张')); // [ '张三', '张起灵' ]
console.log(classRoom.find('三')); // [ '张三' ]

第二种

使用 arguments 和闭包。

function addMethod(target, name, fn) {
    const old = target[name];

    target[name] = function() {
        if (fn.length === arguments.length) {
            return fn.apply(this, arguments);
        } else if (typeof old === 'function') {
            return old.apply(this, arguments);
        }
    }
}

addMethod(classRoom, 'find', function() {
    return this.students;
});

addMethod(classRoom, 'find', function(surname) {
    return this.students.filter(student => {
        return ~student.indexOf(surname);
    });
});

addMethod(classRoom, 'find', function(surname, personalName) {
    return this.students.filter(student => {
        return ~student.indexOf(surname + personalName);
    });
});

console.log(classRoom.find()); // [ '武大', '郎二', '张三', '张起灵', '李四', '王五' ]
console.log(classRoom.find('张')); // [ '张三', '张起灵' ]
console.log(classRoom.find('三')); // [ '张三' ]

调用addMethod时会将匿名函数指向classRoom中的find,由于classRoom是全局变量所以addMethod执行完毕后其中的oldfn仍然在被引用,这里产生闭包。

所以在每次调用addMethod时,都有一个执行环境保存着当时old以及fn,所以在使用find方法是可以找到fn,实现重载。

需要注意的是:

  • 这个重载适用于不同数量的参数,不区分类型、参数名或其它。
  • 会有一些函数调用的开销。

其它

在 TypeScript 中加入了类型,它自带函数重载。ts函数

脚本宝典总结

以上是脚本宝典为你收集整理的JavaScript函数重载全部内容,希望文章能够帮你解决JavaScript函数重载所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。