JavaScript 語言本身不支持傳統(tǒng)意義上的函數(shù)重載（即像 Java、C++ 那樣，同名函數(shù)根據(jù)參數(shù)類型或數(shù)量的不同而自動調(diào)用不同版本）。在 JS 中，如果定義了多個同名函數(shù)，后面的函數(shù)會直接覆蓋前面的函數(shù)。

不過，我們可以通過一些技巧來模擬實(shí)現(xiàn)函數(shù)重載的效果。同時，jQuery 庫中也大量運(yùn)用了這種“偽重載”的設(shè)計(jì)思想，這也是它 API 極其靈活好用的重要原因。

JavaScript 中模擬函數(shù)重載的常見方法

核心思路是：在一個函數(shù)內(nèi)部，通過判斷傳入?yún)?shù)的數(shù)量或類型，來分發(fā)執(zhí)行不同的邏輯分支。

基于參數(shù)數(shù)量（arguments.length）

利用函數(shù)內(nèi)部的 arguments 對象（或 ES6 的剩余參數(shù) ...args）來獲取實(shí)際傳入的參數(shù)個數(shù)，從而執(zhí)行不同的邏輯。

function add(...args) {
  switch (args.length) {
    case 0:
      return 0;
    case 1:
      return args * 2; // 傳1個參數(shù)返回它的2倍
    case 2:
      return args + args; // 傳2個參數(shù)返回它們的和
    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

基于參數(shù)類型（typeof / instanceof）

通過判斷參數(shù)的數(shù)據(jù)類型，來執(zhí)行不同的操作。

function process(input) {
  if (typeof input === "string") {
    console.log("處理字符串邏輯:", input.toUpperCase());
  } else if (typeof input === "number") {
    console.log("處理數(shù)字邏輯:", input * input);
  } else if (Array.isArray(input)) {
    console.log("處理數(shù)組邏輯:", input.join("-"));
  }
}
process("hello"); // 處理字符串邏輯: HELLO
process(10); // 處理數(shù)字邏輯: 100
process(); // 處理數(shù)組邏輯: 1-2-3

現(xiàn)代推薦：使用 ES6 默認(rèn)參數(shù)與對象解構(gòu)

在實(shí)際開發(fā)中，為了避免繁瑣的 if-else 或 switch 判斷，更推薦使用 ES6 的默認(rèn)參數(shù)和接收一個配置對象的方式。這種方式可讀性極強(qiáng)，且沒有參數(shù)順序的困擾。

// 使用默認(rèn)參數(shù)
function load(url, method = "GET", timeout = 5000) {
  console.log(`發(fā)起請求: ${url}, 方法: ${method}, 超時: ${timeout}ms`);
}
load("/api/data"); // 發(fā)起請求: /api/data, 方法: GET, 超時: 5000ms
load("/api/data", "POST"); // 發(fā)起請求: /api/data, 方法: POST, 超時: 5000ms

// 使用對象解構(gòu)
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 中的函數(shù)重載實(shí)現(xiàn)

是的，jQuery 中大量使用了函數(shù)重載的設(shè)計(jì)模式。這極大地降低了開發(fā)者的記憶成本，讓同一個方法名能夠承載多種語義（比如同一個方法既能“獲取值”也能“設(shè)置值”）。

經(jīng)典的 Getter / Setter 重載

這是 jQuery 最常見的重載形式。通過判斷傳入?yún)?shù)的數(shù)量或類型，來決定是執(zhí)行“獲取（getter）”還是“設(shè)置（setter）”操作。

css() 方法：

• $('div').css('color')：傳入1個字符串參數(shù)，獲取該元素的 color 樣式值。
• $('div').css('color', 'red')：傳入2個參數(shù)，設(shè)置該元素的 color 樣式為 red。
• $('div').css({ color: 'red', fontSize: '14px' })：傳入1個對象參數(shù)，批量設(shè)置樣式。

attr() 方法：

• $('#id').attr('title')：獲取 title 屬性的值。
• $('#id').attr('title', 'jQuery')：設(shè)置 title 屬性的值。

核心構(gòu)造函數(shù) $() 的重載

jQuery 的核心 $() 函數(shù)本身就是一個極其強(qiáng)大的重載函數(shù)，它根據(jù)傳入?yún)?shù)的不同，能實(shí)現(xiàn)完全不同的功能（內(nèi)部支持多達(dá) 9 種不同的重載場景）：

• $(selector)：傳入 CSS 選擇器字符串，匹配頁面元素。
• $(htmlString)：傳入 HTML 字符串，動態(tài)創(chuàng)建 DOM 元素。
• $(element)：傳入一個原生 DOM 對象，將其包裝成 jQuery 對象。
• $(callback)：傳入一個函數(shù)，作為 DOM 加載完成后的回調(diào)（相當(dāng)于 $(document).ready()）。

源碼中的參數(shù)判斷邏輯

在 jQuery 的源碼中，經(jīng)常能看到通過判斷參數(shù)類型來進(jìn)行邏輯分發(fā)的代碼。例如在 off() 方法中，如果第二個參數(shù)是函數(shù)，它就會自動調(diào)整參數(shù)的賦值邏輯，以兼容不同的調(diào)用方式：

// jQuery off 方法的部分源碼邏輯示意
off: function (types, selector, fn) {
  // 如果傳入的第二個參數(shù)是一個函數(shù)，說明用戶跳過了 selector 參數(shù)
  if (selector === false || typeof selector === 'function') {
    fn = selector;
    selector = undefined;
  }
  // 后續(xù)邏輯
}

到此這篇關(guān)于JavaScript中模擬函數(shù)重載的常見方法詳解的文章就介紹到這了,更多相關(guān)JavaScript模擬函數(shù)重載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論