Js模拟函数重载小白知识_重载小白入门

背景《JavaScript高级程序设计》中提及,JavaScript 不支持函数重载。若出现函数名称相同情况下,后者覆盖前者,故此不会出现重载的情况。 函数重载函数重载(英语:function overloading),是Ada、C++、C#、D和Java等编程语言中具有的一项特性,这项特性允许创建数项名称相同但输入输出类型或个数不同的子程序,它可以简单地

Js模拟函数重载小白知识

背景

《JavaScript高级程序设计》中提及,JavaScript 不支持函数重载。若出现函数名称相同情况下,后者覆盖前者,故此不会出现重载的情况。  

Js模拟函数重载小白知识_重载小白入门

函数重载

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

场景

例如,一个工厂有着数量级的员工,期望通过姓名找到某一员工或某类员工,使用同一个方法通过透传参数个数去查找员工。 

 

一般实现:

var people = {arguments 和 switch
    names: ["张一", "张二", "张三", "张四", "李一", "李二", "李三", "李四"]
};

// 找全员工
function find() {
    return people.names;
}

// 全量员工中,找到名字中带有特殊”字“的员工
function find1(name) {
    return people.names.filter(item => item.includes(name));
}

// 全量员工中,找到名字中带有多个特殊"字"的员工
function find2(name1, name2) {
    return people.names.filter(item => item.includes(name1) && item.includes(name2));
}

find(); // ["张一", "张二", "张三", "张四", "李一", "李二", "李三", "李四"]
find1('张'); // ["张一", "张二", "张三"]
find2('李', '四') // ['李四']

函数重载,第一种方式:使用 arguments + switch

var people = {
    names: ["张一", "张二", "张三", "张四", "李一", "李二", "李三", "李四"]
};

// arguments + switch方式
people.find() {
    switch(arguments.length) {
        case: 0
            return this.names;
        case: 1
            return this.names.filter(item => item.includes(arguments[0]));    
        case: 2
            return this.names.filter(item => item.includes(arguments[1]) && item.includes(arguments[2]));
    }
}

people.find(); // ["张一", "张二", "张三", "张四", "李一", "李二", "李三", "李四"]
people.find('张'); // ["张一", "张二", "张三"]
people.find('李', '四') // ['李四']

函数重载,第二种方式:使用 arguments + 闭包

item.includes(name));
}

// 全量员工中,找到名字中带有多个特殊"字"的员工
function find2(name1, name2) {
return this.names.filter(item => item.includes(name1) && item.includes(name2));
}

// 全量员工的前 count 名
function find3(count) {
return this.names.slice(0, count)
}

// arguments + 闭包 方式
function addMethod(obj, name, fn) {
var old = obj[name]; // 保存着上一次的添加方法
obj[name] = function() { // 重写obj[name]方法
var isNumber = typeof arguments[0] === ‘number’;
var isEqual = arguments.length === fn.length;
// 这里还可以编写你想要的条件,就例如isNumber
if(isNumber || isEqual){ // 根据透传的参数length与fn方法预期的参数length一直,则执行
return fn.apply(this, arguments);
} else if(typeof old === ‘function’) { // 否则且old类型为function,继续根据闭包链去找
return old.apply(this, arguments);
}
}
}

addMethod(people, ‘find’, find);
addMethod(people, ‘find’, find1);
addMethod(people, ‘find’, find2);
addMethod(people, ‘find’, find3);

people.find(); // ["张一", "张二", "张三", "张四", "李一", "李二", "李三", "李四"]
people.find(‘张’); // ["张一", "张二", "张三"]
people.find(‘李’, ‘四’) // [‘李四’]
people.find(3) // ["张一", "张二", "张三"]
” title=”” data-original-title=”复制”>

var people = {
    names: ["张一", "张二", "张三", "张四", "李一", "李二", "李三", "李四"]
};

// 找全员工
function find() {
    return this.names;
}

// 全量员工中,找到名字中带有特殊”字“的员工
function find1(name) {
    return this.names.filter(item => item.includes(name));
}

// 全量员工中,找到名字中带有多个特殊"字"的员工
function find2(name1, name2) {
    return this.names.filter(item => item.includes(name1) && item.includes(name2));
}

// 全量员工的前 count 名
function find3(count) {
    return this.names.slice(0, count)
}

// arguments + 闭包 方式
function addMethod(obj, name, fn) {
    var old = obj[name]; // 保存着上一次的添加方法
    obj[name] = function() { // 重写obj[name]方法
        var isNumber = typeof arguments[0] === 'number';
        var isEqual = arguments.length === fn.length;
        // 这里还可以编写你想要的条件,就例如isNumber
        if(isNumber || isEqual){ // 根据透传的参数length与fn方法预期的参数length一直,则执行
            return fn.apply(this, arguments);
        } else if(typeof old === 'function') { // 否则且old类型为function,继续根据闭包链去找
            return old.apply(this, arguments);
        }
    }
}

addMethod(people, 'find', find);
addMethod(people, 'find', find1);
addMethod(people, 'find', find2);
addMethod(people, 'find', find3);

people.find(); // ["张一", "张二", "张三", "张四", "李一", "李二", "李三", "李四"]
people.find('张'); // ["张一", "张二", "张三"]
people.find('李', '四') // ['李四']
people.find(3) // ["张一", "张二", "张三"]
海计划公众号
(0)
上一篇 2020/03/29 01:41
下一篇 2020/03/29 01:41

您可能感兴趣的内容

  • 如何招到一个靠谱的程序员入门攻略_程序员小白帮助

    我的上一份工作是在一家世界500强金融集团担任架构师,当时,公司的IT团队规模将近2000人。与其他IT公司一样,程序员的流动性也比较高,而作为架构师,我需要为所在的部门招聘各个层级的开发人员,当然也包括外包。在这长达5年时间里,我面试了大约400名程序员。我并没有参加过任何人力资源方面的培训,也没有正式研究过如何面试程序员,但是我通过对大量程序员的面试,以

    2020/04/03
  • 前端性能优化之重排和重绘入门攻略_优化零基础入门

    来源:https://segmentfault.com/a/1190000016990089作者:Parkeeers前言,最近利用碎片时间拜读了一下尼古拉斯的另一巨作《高性能JavaScript》,今天写的文章从“老生常谈”的页面重绘和重排入手,去探究这两个概念在页面性能提升上的作用。一.重排 & 重绘有经验的大佬对这个概念一定不会陌生,“浏览器输入URL发

    2020/04/03
  • swiper在angular.js中使用循环轮播失效的解决方法总汇使用攻略_轮播攻略教程

    我们在anjular.js 中使用了swiper轮播图,把json数据放入swiper-slide中,容易出现swiper循环轮播失效的问题,就此整理一些此问题的解决方法。1、动态接口形式获取数据的情况:当swiper中的json数据是通过接口形式获取的,我们如果把轮播js代码写在获取数据中,因为他是先获取数据才执行轮播的,如果你把他放在外部,实行轮播数据获

    2020/04/03
  • 如何架构一个中后台项目的前端部分?小白知识_架构基础教程

    前言最近我正在公司做一个中后台管理系统的前端框架搭建工作,虽然说公司已经有现成的中后台框架可供选择,但是并不特别适合我们部门的项目,因此在借鉴原有框架的基础上融入了我的一些个人想法和思考在里面。这篇文章便主要来谈谈在架构一个中后台系统的前端部分上我的实践点。技术选型不管是前端抑或后端,从零开始做一个新项目避免不了技术选型这一块,其应该也是最先需要考虑的内容,

    2020/03/26
  • 微信小程序8种数据通信的方式基础知识_通信小白攻略

    前言数据通信在开发中是必不可少的一个环节,也是我们必须掌握的知识。知道得越多的数据通信方式,实现业务会更加得心应手。下面我将这些通信方式归类介绍:组件通信全局通信页面通信组件通信properties父组件向子组件通信,与 Vue 的 props 作用相同。父组件向子组件传数据:</my-compon

    2020/03/20
  • CSS隐藏页面元素常用方法入门百科不同场景下使用CSS隐藏元素_元素小白教程

    使用 CSS 让元素不可见的方法很多,剪裁、定位到屏幕外、明度变化等都是可以的。虽然它们都是肉眼不可见,但背后却在多个维度上都有差别。元素不可见,同时不占据空间、辅助设备无法访问、不渲染使用 script 标签隐。例如:
    此时,图片 1.jpg 是不会有请求

    2020/04/05
  • H5 Video 使用网络地址时获取其大小和第一帧图片小白攻略_video使用攻略

    问题描述某一天接了个需求,要求前端获取视频文件的大小、时长以及第一帧图片传给后端服务器存储,这样有两种情况,一种是通过input上传本地视频文件,一种是给出视频的网络地址,将其直接赋值给video标签的src属性。使用input标签上传本地视频使用上传的视频文件,这都好说,有了file文件对象,可以随意操作,获取其siz

    2020/04/05
  • docsify一个神奇的文档生成工具菜鸟教程网_文档菜鸟知识

    在开发项目时,我们或许需要一份精致的开发文档,那么使用docsify是不错的选择,docsify是一个文档生成工具,它直接加载 Markdown 文件并动态渲染,同时还可以生成封面页。所以我们只需要写完 Markdown 文档,就可以看到文档页面了。特性无需构建无需编译,写完markdown文档直接发布容易使用并且轻量 (~18kB gzipped)智能的全

    2020/03/29
  • 米扑博客小白知识专注于IT技术与量化金融, 用技术创造人生财富

    米扑博客菜鸟知识 官方网址:https://blog.mimvp.com/ 简介描述:专注于IT技术与量化金融, 用技术创造人生财富 米扑博客, 专注于IT技术与量化金融, 用技术…

    2020/03/06
  • 网易云课堂使用攻略在网易云课堂前端开发频道,发现好课!

    网易云课堂基础入门 官方网址:http://study.163.com/category/front-end-development 简介描述:在网易云课堂前端开发频道,发现好课!

    2020/03/05
  • React中JSX和虚拟dom基础入门_jsx使用帮助

    1.JSX理解举例:const element =

    Hello, world!

    ;这被称为 JSX,是一个 JavaScript 的语法扩展。建议在 React 中配合使用 JSX,JSX 可以生成 React “元素”,而且JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言,但它具有 JavaSc

    2020/03/24
  • css transparent属性小白教程css 透明颜色transparent的使用_透明使用帮助

    在css中 transparent到底是什么意思呢? transparent它代表着全透明黑色,即一个类似rgba(0,0,0,0)这样的值。例如在css属性中定义:background:transparent,意思就代表背景透明。实际上background默认的颜色就是透明的属性,所以写和不写都是一样的。transparent一般使用场景:如果一个元素覆盖

    2020/04/05
  • 郑州网站建设告诉你移动端网站关键词怎么优化新手入门_网站入门知识

    郑州网站建设告诉你移动端网站关键词怎么优化?现在人人都要用手机,手机已经成为我们生活中不可或缺的一部分,随着互联网的发展,移动端也越来越重要了移动端网站关键词怎么优化?随着现在互联网的快速发展,据目前的用户搜索习惯来看,移动端网站的索引已经开始优先于PC端网站的索引了,移动端的优质流量开始远远大于PC端了,很多企业都开始关注移动端关键词排名,移动端和PC端排

    2020/04/03
  • 聊一聊 JavaScript 的 URL 对象是什么?使用教程_url小白指南

    如果我们自己编写从URL中分析和提取元素的代码,那么有可能会比较痛苦和麻烦。程序员作为这个社会中最“懒”的群体之一,无休止的重复造轮子必然是令人难以容忍的,所以大多数浏览器的标准库中都已经内置了URL对象。那么现在,有了它,我们就可以将URL字符串作为参数传递给URL的构造函数,并创建它的实例解析URL内容了吗?答案是:“是的!”。要使用URL构造函数创建U

    2020/03/22
  • Js函数的扩展教程视频_函数入门百科

    这篇文章主要介绍了函数的扩展,函数的扩展只要有三个方面:参数的默认值箭头函数关于尾调用的优化1:参数的默认值(会形成一个单独的作用域)可以在直接定义函数的时候,定义好参数如果没传或者传错 undefined。//解构的基本用法
    //用法1:
    function log(x, y = ‘World’) {console.log(x, y);
    }log(‘Hell

    2020/03/29
  • Web认证攻略教程介绍Web开发中几种常用的认证机制_web指南教程

    如今web服务随处可见,成千上万的web程序被部署到公网上供用户访问,有些系统只针对指定用户开放,属于安全级别较高的web应用,他们需要有一种认证机制以保护系统资源的安全,本文将探讨五种常用的认证机制及优缺点。 HTTP基本认证(HTTP Basic Auth) 在HTTP中,HTTP基本认证是一种允许Web浏览器或者其他客户端在请求时提供用户名和口令形式

    2020/04/03