当前位置：首页 > JavaScript

js 实现重载

2026-02-01 21:46:46JavaScript

在JavaScript中，函数重载（Overloading）不像其他语言（如Java或C++）那样直接支持。但可以通过一些技巧模拟实现类似的功能，以下是几种常见方法：

根据参数数量实现重载

通过检查arguments.length或使用剩余参数（rest parameters）来区分不同参数数量的调用：

js 实现重载

function overloadExample() {
  if (arguments.length === 1) {
    console.log('一个参数:', arguments[0]);
  } else if (arguments.length === 2) {
    console.log('两个参数:', arguments[0], arguments[1]);
  }
}
overloadExample(10);       // 输出: 一个参数: 10
overloadExample(10, 20);   // 输出: 两个参数: 10 20

根据参数类型实现重载

使用typeof或instanceof检查参数类型：

function processInput(input) {
  if (typeof input === 'string') {
    return input.toUpperCase();
  } else if (typeof input === 'number') {
    return input * 2;
  }
}
console.log(processInput('hello')); // 输出: HELLO
console.log(processInput(5));      // 输出: 10

使用对象参数实现命名参数

通过传递配置对象实现更灵活的重载：

js 实现重载

function setOptions(options) {
  if (options.width) {
    console.log('设置宽度:', options.width);
  }
  if (options.height) {
    console.log('设置高度:', options.height);
  }
}
setOptions({ width: 100 });          // 只设置宽度
setOptions({ width: 100, height: 200 }); // 设置宽高

ES6默认参数实现简化

利用ES6的默认参数简化重载逻辑：

function createElement(type, width = 100, height = 100) {
  console.log(`创建${type}, 尺寸: ${width}x${height}`);
}
createElement('div');         // 使用默认宽高
createElement('div', 200);   // 自定义宽度
createElement('div', 200, 300); // 完全自定义

使用策略模式

通过将不同处理逻辑分离为策略对象：

const strategies = {
  string: (arg) => `处理字符串: ${arg}`,
  number: (arg) => `处理数字: ${arg * 2}`,
  default: (arg) => `处理默认: ${arg}`
};

function process(arg) {
  const handler = strategies[typeof arg] || strategies.default;
  return handler(arg);
}
console.log(process('test'));  // 输出: 处理字符串: test
console.log(process(5));       // 输出: 处理数字: 10

这些方法各有优缺点，选择取决于具体场景。参数数量检查适合简单场景，对象参数方式可读性更好，策略模式则更易于扩展。

标签: js