Blog

JavaScript Function Overloading

JavaScript 中沒有真正的函式過載

Javascritp 中，同一個作用域同樣名字的函式，後面的會覆蓋前面的。

function overload(a){
    console.log('一個引數')
}

function overload(a,b){
    console.log('兩個引數')
}

overload(1);     // 兩個引數
overload(1, 2);  // 兩個引數

模擬實現函式過載

arguments 是函式內部的一個類陣列物件，儲存叫叫函式時，傳給函式的所有引數。

function overload () {
  if (arguments.length === 1) {
    console.log('一個引數')
  }
  if (arguments.length === 2) {
    console.log('兩個引數')
  }
}

overload(1);     //一個引數
overload(1, 2);  //兩個引數

就可以通過判斷有幾個引數執行不同操作，但引數多時怎麼辦?

假設下列需求

有一個 users 物件，users 物件的 values 屬性中存著名字，名字的組成為：空格左邊的是 first-name ，空格右邊的是 last-name。

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

在 users物件中新增一個 find 方法

  • 不傳任何引數時， 回傳整個 users .values
  • 傳一個引數時，回傳 first-name 跟這個引數匹配的元素。
  • 傳兩個引數時，回傳 first-name 和 last-name 都匹配的元素。

通過一個 addMethod 函式，來在 users 物件中新增這個 find 方法。

addMethod 函式，它接收3個引數

  • 第一個：要繫結方法的物件
  • 第二個：繫結的方法名稱，
  • 第三個：需要繫結的方法
function addMethod (object, name, fn) {
  // 先把原來的object[name] 方法，儲存在old中
  var old = object[name];

  // 重新定義 object[name] 方法
  object[name] = function () {
    // 如果函式需要的引數 和 實際傳入的引數 的個數相同，就直接呼叫fn
    if (fn.length === arguments.length) {
      return fn.apply(this, arguments);

      // 如果不相同,判斷old 是不是函式，
      // 如果是就呼叫old，也就是剛才儲存的 object[name] 方法
    } else if (typeof old === "function") {
      return old.apply(this, arguments);
    }
  }
}

使用這個 addMethod 函式

// 不傳引數時，返回整個values陣列
function find0 () {
  return this.values;
}
// 傳一個引數時，返回firstName匹配的陣列元素
function find1 (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;
}
// 傳兩個引數時，返回firstName和lastName都匹配的陣列元素
function find2 (firstName, lastName) {
  var ret = [];
  for (var i = 0; i < this.values.length; i++) {
    if (this.values[i
    ] === (firstName + " " + lastName)) {
      ret.push(this.values[i
      ]);
    }
  }
  return ret;
}
// 給 users 物件新增處理 沒有引數 的方法
addMethod(users, "find", find0);

// 給 users 物件新增處理 一個引數 的方法
addMethod(users, "find", find1);

// 給 users 物件新增處理 兩個引數 的方法
addMethod(users, "find", find2);

// 測試：
console.log(users.find()); //["Dean Edwards", "Alex Russell", "Dean Tom"]
console.log(users.find("Dean")); //["Dean Edwards", "Dean Tom"]
console.log(users.find("Dean Edwards")); //["Dean Edwards"]

參考來源

https://www.itread01.com/content/1547173284.html

發佈留言