js模拟重载

概述

众所周知,js里面是没有函数重载这一说的,主要有如下的几个原因:

1. 动态类型语言特性

JavaScript 是一种动态类型语言,函数的参数在定义时不需要指定类型。这与支持重载的静态类型语言(如 Java、C++)不同,那些语言可以根据参数类型和数量来区分不同的函数实现。

2. 函数参数处理机制

JavaScript 函数在被调用时:

  • 不检查参数数量(可以传递比声明多或少的所有参数)
  • 所有参数都被存储在 arguments 对象中(ES6 之前)
  • 多余的参数会被忽略,缺少的参数会被赋值为 undefined

3. 函数签名唯一性

在 JavaScript 中,函数名是唯一的标识符,后定义的函数会覆盖同名的先前定义,无法像传统重载那样保留多个版本。

模拟实现

核心思路:闭包,通过借助闭包函数的缓存特性,返回加工后的函数,然后通过map缓存对于参数类型到函数具体实现,即可实现重载

实现

js 复制代码
// 构造重载函数
function createOverload() {
  // 定义一个map结构,缓存不同参数类型对应的函数实现
  const fnMap = new Map();
  function overload(...args) {
    // 获取调用参数的类型列表
    const key = args.map((arg) => typeof arg).join(",");
    // 从map中获取对应的函数实现
    const fn = fnMap.get(key);
    if (!fn) {
      throw new Error(`No function registered for arguments: ${key}`);
    }
    // 调用对应的函数实现
    return fn.apply(this, args);
  }

  //   追加重载实现函数
  overload.addImpl = function (...args) {
    console.log("Adding implementation for:", args);
    // 最后一个参数必须是函数
    const fn = args.pop();
    if (typeof fn !== "function") {
      throw new Error("Last argument must be a function");
    }
    console.log("fn-map", fnMap);
    const key = args.join(",");
    // 将参数类型作为key存储函数实现
    fnMap.set(key, fn);
  };

  return overload;
}

const getUsers = createOverload();

// 无参情况
getUsers.addImpl(() => {
  console.log("No arguments provided");
});

const searchPage = (page, size = 10) => {
  console.log(`Searching page ${page} with size ${size}`);
};

// 参数:number
getUsers.addImpl("number", searchPage);

// 参数:number, number
getUsers.addImpl("number", "number", searchPage);

// 参数:string
getUsers.addImpl("string", (name) => {
  console.log("String argument provided", name);
});

// 参数:string:number
getUsers.addImpl("string", "number", (name, age) => {
  console.log(`Searching for user ${name} with age ${age}`);
});

// 使用

getUsers();

getUsers(1); // Searching page 1 with size 10

getUsers(1, 20); // Searching page 1 with size 20

getUsers("Alice"); // String argument provided

getUsers("Alice", 30); // Searching for user Alice with age 30

结果

总结

虽然js中并不存在函数重载,但是我们依然能够通过间接形式实现对于的功能。

相关推荐
kyriewen1 分钟前
我测了 6 种防请求竞态的写法:只有 1 种真能打
前端·javascript·程序员
孟健4 分钟前
用 WorkBuddy 做个人名片网页,挂上开源设计技能后效果完全不同了
前端·人工智能·ai编程
IT_陈寒8 分钟前
SpringBoot自动配置的坑,这次终于爬出来了
前端·人工智能·后端
OpsEye40 分钟前
企业大模型压测,需要重点关注哪些指标?
javascript·ai编程
LuHang1 小时前
从天地图切换到高德地图:一次真实的底图迁移实战
前端·vue.js·cesium
用户360055579001 小时前
Kestrel_VLLM - 27 · 寄存器常驻与融合发射:两次「少发一次」
前端
前端小万1 小时前
用"道法术器"重构你和 AI 的协作方式
前端·人工智能·程序员
鶴哥只手遮天1 小时前
Angular 22 源码级深度解析-第 06 章 模板指令全解:`ɵɵelementStart`、`ɵɵproperty`、`ɵɵadvance` 与绑定指令
前端·开源·angular.js
像我这样帅的人丶你还2 小时前
我html生成的doc文档为何在手机文档显示不了图片?
前端·javascript
前端双越老师3 小时前
程序员 1v1 访谈系列第十期:纯前端坚持不了多久了
前端·ai编程·全栈