JS中模拟函数重载的使用

JavaScript 语言本身不支持传统意义上的函数重载（即像 Java、C++ 那样，同名函数根据参数类型或数量的不同而自动调用不同版本）。在 JS 中，如果定义了多个同名函数，后面的函数会直接覆盖前面的函数。

不过，我们可以通过一些技巧来模拟实现函数重载的效果。同时，jQuery 库中也大量运用了这种"伪重载"的设计思想，这也是它 API 极其灵活好用的重要原因。

JavaScript 中模拟函数重载的常见方法

核心思路是：在一个函数内部，通过判断传入参数的数量或类型，来分发执行不同的逻辑分支。

1. 基于参数数量（arguments.length） 利用函数内部的 arguments 对象（或 ES6 的剩余参数 ...args）来获取实际传入的参数个数，从而执行不同的逻辑。

javascript 复制代码

function add(...args) {
  switch (args.length) {
    case 0:
      return 0;
    case 1:
      return args * 2; // 传1个参数返回它的2倍
    case 2:
      return args + args; // 传2个参数返回它们的和
    default:
      return args.reduce((a, b) => a + b, 0); // 3个及以上返回总和
  }
}
console.log(add()); // 0
console.log(add(5)); // 10
console.log(add(3, 4)); // 7

2. 基于参数类型（typeof / instanceof） 通过判断参数的数据类型，来执行不同的操作。

javascript 复制代码

function process(input) {
  if (typeof input === "string") {
    console.log("处理字符串逻辑:", input.toUpperCase());
  } else if (typeof input === "number") {
    console.log("处理数字逻辑:", input * input);
  } else if (Array.isArray(input)) {
    console.log("处理数组逻辑:", input.join("-"));
  }
}
process("hello"); // 处理字符串逻辑: HELLO
process(10); // 处理数字逻辑: 100
process(); // 处理数组逻辑: 1-2-3

3. 现代推荐：使用 ES6 默认参数与对象解构 在实际开发中，为了避免繁琐的 if-else 或 switch 判断，更推荐使用 ES6 的默认参数和接收一个配置对象的方式。这种方式可读性极强，且没有参数顺序的困扰。

javascript 复制代码

// 使用默认参数
function load(url, method = "GET", timeout = 5000) {
  console.log(`发起请求: ${url}, 方法: ${method}, 超时: ${timeout}ms`);
}
load("/api/data"); // 发起请求: /api/data, 方法: GET, 超时: 5000ms
load("/api/data", "POST"); // 发起请求: /api/data, 方法: POST, 超时: 5000ms

// 使用对象解构
function createUser(options) {
  const { name = "匿名", age = 18, role = "user" } = options;
  return { name, age, role };
}
createUser({ name: "Tom" }); // { name: 'Tom', age: 18, role: 'user' }
createUser({ name: "Jerry", role: "admin" }); // { name: 'Jerry', age: 18, role: 'admin' }

jQuery 中的函数重载实现

是的，jQuery 中大量使用了函数重载的设计模式。这极大地降低了开发者的记忆成本，让同一个方法名能够承载多种语义（比如同一个方法既能"获取值"也能"设置值"）。

1. 经典的 Getter / Setter 重载 这是 jQuery 最常见的重载形式。通过判断传入参数的数量或类型，来决定是执行"获取（getter）"还是"设置（setter）"操作。

css() 方法 ：
- $('div').css('color')：传入1个字符串参数，获取该元素的 color 样式值。
- $('div').css('color', 'red')：传入2个参数，设置该元素的 color 样式为 red。
- $('div').css({ color: 'red', fontSize: '14px' })：传入1个对象参数，批量设置样式。
attr() 方法 ：
- $('#id').attr('title')：获取 title 属性的值。
- $('#id').attr('title', 'jQuery')：设置 title 属性的值。

2. 核心构造函数 $() 的重载 jQuery 的核心 $() 函数本身就是一个极其强大的重载函数，它根据传入参数的不同，能实现完全不同的功能（内部支持多达 9 种不同的重载场景）：

$(selector)：传入 CSS 选择器字符串，匹配页面元素。
$(htmlString)：传入 HTML 字符串，动态创建 DOM 元素。
$(element)：传入一个原生 DOM 对象，将其包装成 jQuery 对象。
$(callback)：传入一个函数，作为 DOM 加载完成后的回调（相当于 $(document).ready()）。

3. 源码中的参数判断逻辑 在 jQuery 的源码中，经常能看到通过判断参数类型来进行逻辑分发的代码。例如在 off() 方法中，如果第二个参数是函数，它就会自动调整参数的赋值逻辑，以兼容不同的调用方式：

javascript 复制代码

// jQuery off 方法的部分源码逻辑示意
off: function (types, selector, fn) {
  // 如果传入的第二个参数是一个函数，说明用户跳过了 selector 参数
  if (selector === false || typeof selector === 'function') {
    fn = selector;
    selector = undefined;
  }
  // 后续逻辑
}