参考文章:https://www.cnblogs.com/yugege/p/5539020.html

Javascript高级编程学习笔记(16)—— 引用类型(5) Function类型

这一切的根源就是:JS中的函数名只是一个指针,而不是一个函数签名

所以当我们在JS中声明同名函数的时候,实际上就是让已经指向一个函数的指针指向另外一个函数,自然也就不能实现重载了

在《JavaScript高级程序设计》第三版(P66)准确描述了JS没有重载

重载就是一组具有相同名字、不同参数列表的函数(方法)。

模拟重载:

实现方法一:

原理:在函数中判断数组arguments.length,根据传入参数的长度,经由switch判断,然后执行不同的代码。

function overLoading() {// 根据 arguments.length 判断switch (arguments.length) {case 0:/* 传入0个参数时执行的代码 */break;case 1:/* 传入1个参数时执行的代码 */break;case 2:/* 传入2个参数时执行的代码 */break;/* 还有好多······ */}
}

实现方法二:

思路:实现object.find方法,当传入方法的参数不同时,执行不同的函数,这时就需要动态封装object.find的方法了

demo:有一个people对象,里面存着一些人名。

var people = {values: ["Dean Edwards", "Sam Stephenson", "Alex Russell", "Dean Tom"]
};

需求:想要在people对象中拥有一个find方法:

当不传入参数时,返回people.values所有的元素;

当传入一个参数时,就把first-name跟这个参数匹配的元素返回来;

当传入俩个参数时,把first-name和last-name都匹配返回;

addMethod(people, "find", function() {}); /*不传参*/
addMethod(people, "find", function(a) {}); /*传一个*/
addMethod(people, "find", function(a, b) {}); /*传两个*/

那么实现这个addMethod方法?

function addMethod(object, name, fn) {var old = object[name]; // 使用临时变量接收 object 的 name 方法object[name] = function () { // 定义name方法/*this 指向 objectfn.length 指 fn参数的长度arguments.length 指得是name()方法中的参数// 当调用不同参数的fn时,会每次匹配所有的fn,发生递归*/if(fn.length === arguments.length) {return fn.apply(this, arguments);} else if (typeof old === "function") {return old.apply(this, arguments);}}

测试:

 //addMethodfunction addMethod(object, name, fn) {var old = object[name];object[name] = function () {console.log(fn.length);console.log(arguments.length);console.log(typeof old);if (fn.length === arguments.length) {return fn.apply(this, arguments);} else if (typeof old === "function") {return old.apply(this, arguments);}}}var people = {values: ["Dean Edwards", "Alex Russell", "Dean Tom"]};/* 下面开始通过addMethod来实现对people.find方法的重载 */// 不传参数时,返回peopld.values里面的所有元素addMethod(people, "find", function () {return this.values;});// 传一个参数时,按first-name的匹配进行返回addMethod(people, "find", function (firstName) {var ret = [];for (var i = 0; i < this.values.length; i++) {if (this.values[i].indexOf(firstName) === 0) {ret.push(this.values[i]);}}return ret;});// 传两个参数时,返回first-name和last-name都匹配的元素addMethod(people, "find", function (firstName, lastName) {var ret = [];for (var i = 0; i < this.values.length; i++) {console.log(firstName + " " + lastName);if (this.values[i] === (firstName + " " + lastName)) {ret.push(this.values[i]);}}return ret;});// 测试:console.log(people.find()); //["Dean Edwards", "Alex Russell", "Dean Tom"]console.log(people.find("Dean")); //["Dean Edwards", "Dean Tom"]console.log(people.find("Dean","Edwards")); //["Dean Edwards"]

转载于:https://www.cnblogs.com/houfee/p/9838551.html

JavaScript 之 JS重载相关推荐

  1. 如何使用 Javascript/node.js 在 WebRTC 中构建音视频通话APP?

    语音和视频通信的嵌入对于现在的互联网产品发展的重要性已经毋庸置疑,WebRTC 事实上是一种通用的技术框架标准,它可以在浏览器之间不需要中介的情况下,实现任意数据流交换.这使得 web 应用程序和移动 ...

  2. 【JavaScript】JS事件机制学习

    常用的事件 通过事件机制,达到与用户的交互,与java的swing交互类似. 主要是结合js的函数使用. 当你添加一个事件之后没有达到想要的效果时,就要检查一下是不是给HTML标签添加了合适的事件,以 ...

  3. JavaScript(JS)常用正则表达式汇总

    文章目录 自定义字符串校验函数 常用正则表达式 自定义字符串校验函数 校验字符串是否全由数字组成,是则返回true,否则返回false: function isDigit(str) {var regE ...

  4. 【javascript】js检验注册密码强度效果

    注册模块中输入密码需要显示密码强度(低中高) <!DOCTYPE HTML> <html lang="en"> <head> <meta ...

  5. JavaScript,js的亲戚计算器,中国亲戚关系计算器

    JavaScript,js的亲戚计算器,中国亲戚关系计算器 工具简介 由于工作生活节奏不同,如今很多关系稍疏远的亲戚之间来往并不多.因此放假回家过年时,往往会搞不清楚哪位亲戚应该喊什么称呼,很是尴尬. ...

  6. (Demo分享)利用JavaScript(JS)做一个可输入分钟的倒计时钟功能

    利用JavaScript(JS)实现一个可输入分钟的倒计时钟功能 本文章为 Tz张无忌 原创文章,转载请注明来源,谢谢合作! 网络各种利用JavaScript做倒计时的Demo对新手很不友好,这里我亲 ...

  7. 【javascript】js面试题原型和原型链

    1.javascript继承 js使用class实现继承,本质是使用原型来完成 //人的类 class Person{constructor(name) {this.name = name}//走路的 ...

  8. javascript(js)语法 将blob转arrayBuffer、arrayBuffer转Uint8Array、Uint8Array转String的方法

    文章目录 javascript(js)语法 将blob转arrayBuffer.arrayBuffer转Uint8Array.Uint8Array转String的方法 1. blob转arrayBuf ...

  9. JavaScript笔记---JS简介和开发入门

    目录 一.JavaScript概述 1.什么是JS: 2.JS的作用: 3.JS的组成: 4.JS的语法: 5.JS的数据类型: 6.JS的运算符和语句: 7.JS的输出 8.JS的开发步骤 二.JS ...

最新文章

  1. tomcat9配置https-pfx
  2. 【PAT (Advanced Level) Practice】1005 Spell It Right (20 分)
  3. vue实例、指令、生命周期
  4. Hive安装与配置MySQL元数据库
  5. Windows安装pytorch-cpu
  6. 数据结构与算法:十大排序算法之堆排序
  7. 少样本学习系列(一)【Metrics-Based Methods】
  8. android获取某应用的帧数据
  9. 洛谷 2051 [AHOI2009] 中国象棋
  10. 水凝胶 静电纺丝_离子液体/水和静电纺丝条件对聚偏氟乙烯纳米纤维晶体结构的影响...
  11. 怎么设置Linux swap分区?方法教程
  12. 论文写作学习个人总结
  13. 阿里云服务器密码重置
  14. 韩国驾驶照换中国驾驶照
  15. 基础连接已关闭解决办法_手机wifi连不上怎么办 手机wifi连不上解决办法【详解】...
  16. 爬取github上热门项目并绘制图表
  17. 北京交通大学计算机博士导师,董平(北京交通大学教授、博士生导师)_百度百科...
  18. 微软求职攻略之笔试答疑
  19. 报表数据填报中的合法性校验 1
  20. ubuntu16.04 安装 nvidia GT730驱动

热门文章

  1. leetcode46.全排列
  2. js获取当前时间戳,仿PHP函数模式
  3. toast, 警告窗
  4. BZOJ3928 [Cerc2014] Outer space invaders
  5. 谷歌,火狐浏览器不能禁用自动补齐的bug缺陷
  6. oracle权限的分配
  7. 【转】使用 F#、MapReduce 和 Windows Azure 分析日志文件
  8. (97)FPGA时序违规案例(二)
  9. (19)VHDL实现流水灯
  10. java printf与println_浅析Java中print、printf、println的区别