关闭

Js方法/函数重载的实现

时间: 2019-04-13阅读: 693标签: 函数

函数重载(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 = 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执行完毕后其中的old、fn仍然在被引用,这里产生闭包。 所以在每次调用addMethod时,都有一个执行环境保存着当时的old以及fn,所以在使用find方法是可以找到fn,实现重载。

需要注意的是:

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


其它

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


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/2867

关闭

在vue项目中,如何定义全局变量/全局函数?

如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数

js中 is_NaN()函数的使用

isNaN() 函数用于检查其参数是否是非数字值。它是JavaScript提供的一个内置函数。这个函数使用了Number() 去转换需要判断的值。Number() 去转换值,如果有任意非数值字符存在则就不是一个数值

工作中常用的 JavaScript 函数片段

查找数组最小,同上,不明白为什么要分成两个题目。Math.max 换成 Math.min,s>n?s:n 换成 s<n?s:n,(n,m)=>m-n 换成 (n,m)=>n-m,或者直接取最后一个元素

JS常用函数原理的实现

本文针对目前常见的面试题,实现了相应方法的核心原理,部分边界细节未处理。后续也会持续更新,希望对你有所帮助。实现一个call函数;实现一个apply函数

用原生Js实现Jquery函数方法

在本文中我将把自己最常用的 jQuery 函数转换为原生 JavaScript。有时我需要创建一个简单的静态 HTML 或登录页面,而且不想引入任何库或其它依赖。对这种情况,我只使用普通的 JavaScript 来完成工作

10个非常实用的Js工具函数

生成一周时间new Array 创建的数组只是添加了length属性,并没有实际的内容。通过扩展后,变为可用数组用于循环,类型判断判断核心使用Object.prototype.toString,这种方式可以准确的判断数据类型。

JS的Math()_四舍五入、向下取整等

Math 对象并不像 Date 和 String 那样是对象的类,JS的Math():四舍五入round、向下取整floor、向上取整ceil、随机数random、绝对值abs、最小值min、最大值max

js之惰性函数

惰性函数是js函数式编程的另一个应用,惰性函数表示函数执行的分支只会在函数第一次调用的时候执行,他的应用情景在于当我们遇到一个需要判断场景去调用不同的方法时,避免重复进入函数内的if判断,也就是说if判断只进行一次,之后函数就会被分支里的代码替换掉

js构造函数的方法

类方法是不需要进行实例化就可以使用的方法;反而实例化之后,类方法在实例中不可用。对象方法和原型方法,只有实例化之后才可以使用。

js中HttpServletRequest的使用

HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,开发人员通过这个对象的方法,可以获得客户这些信息。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!