JavaScript實現函數重載

時間 2019-12-04

標籤 javascript 實現函數重載欄目 JavaScript 简体版

原文原文鏈接

概念

重載是指函數或者方法有相同的名稱，可是參數個數或類型不相同的情形，這樣的同名不一樣參的函數或者方法之間，互相稱之爲重載函數或方法。數組

咱們知道，JavaScript函數能夠隨意傳遞任意數量、任意類型的參數，那麼它有沒有重載呢？微信

答案是有的，下面咱們經過3種方法來實現JavaScript的函數重載。閉包

實現

0. 目標

咱們有一個people對象app

var people = {
  values: ['Dean Edwards', 'Sam Stephenson', 'Alex Russell', 'Dean Tom']
};

想要實現一個find方法，不傳參數的時候，輸出全部名字，只傳1個參數的時候，輸出全部fristName和參數相同的名字，傳2個參數的時候，輸出全部firstName和lastName和2個參數分別相同的名字。函數

people.find();                          // ["Dean Edwards", "Sam Stephenson", "Alex Russell", "Dean Tom"]
people.find('Dean');                    // ["Dean Edwards", "Dean Tom"]
people.find('Dean', 'Edwards');            // ["Dean Edwards"]

1. 利用arguments和switch實現重載

people.find = function () {
  switch (arguments.length) {
    case 0:
      return this.values;

    case 1:
      return this.values.filter((value) => {
        var firstName = arguments[0];
        return value.indexOf(firstName) !== -1 ? true : false;
      });

    case 2:
      return this.values.filter((value) => {
        var fullName = `${arguments[0]} ${arguments[1]}`;
        return value.indexOf(fullName) !== -1 ? true : false;
      });
  }
};

console.log(people.find());                 // ["Dean Edwards", "Sam Stephenson", "Alex Russell", "Dean Tom"]
console.log(people.find('Dean'));           // ["Dean Edwards", "Dean Tom"]
console.log(people.find('Dean', 'Edwards'));   // ["Dean Edwards"]

這種方式你們確定都能看懂，就很少說啦。this

2. 利用arguments和閉包實現重載

function addMethod (object, name, fn) {
  // 把前一次添加的方法存在一個臨時變量old中
  var old = object[name];

  // 重寫object[name]方法
  object[name] = function () {
    if (fn.length === arguments.length) {
      // 若是調用object[name]方法時，若是實參和形參個數一致，則直接調用
      return fn.apply(this, arguments);
    } else if (typeof old === 'function') {
      // 若是實參形參不一致，判斷old是不是函數，若是是，就調用old
      return old.apply(this, arguments);
    }
  };
}

addMethod(people, 'find', function() {
  return this.values;
});

addMethod(people, 'find', function(firstName) {
  return this.values.filter((value) => {
    return value.indexOf(firstName) !== -1 ? true : false;
  });
});

addMethod(people, 'find', function(firstName, lastName) {
  return this.values.filter((value) => {
    var fullName = `${firstName} ${lastName}`;
    return value.indexOf(fullName) !== -1 ? true : false;
  });
});

console.log(people.find());                     // ["Dean Edwards", "Sam Stephenson", "Alex Russell", "Dean Tom"]
console.log(people.find('Dean'));               // ["Dean Edwards", "Dean Tom"]
console.log(people.find('Dean', 'Edwards'));    // ["Dean Edwards"]

這裏addMethod(object, name, fn)方法是核心。咱們着重分析一下爲何這裏會有閉包，能夠保存上一個註冊的函數。spa

function addMethod (object, name, fn) {
  // object, name, fn是傳入的3個參數
  var old = object[name];

  object[name] = function () {
    // 這裏對old和fn進行了引用
    if (fn.length === arguments.length) {
      return fn.apply(this, arguments);
    } else if (typeof old === 'function') {
      return old.apply(this, arguments);
    }
  };
}

object是另一個引用對象，它的一個方法中引用了old和fn，因此對於addMethod來講，它的局部變量在addMethod函數執行完後，仍然被另外的變量所引用，致使它的執行環境沒法銷燬，因此產生了閉包。code

所以，每次調用addMethod，都會有一個執行環境保存着當時的old和fn，因此在調用people.find()的時候能夠找到當時注入的fn，實現函數重載。對象

3. 利用Proxy和arguments實現重載

var proxy = new Proxy(people, {
  get: function (target, key, receiver) {
    if (key === 'find') {
      return function () {
        switch (arguments.length) {
          case 0:
            return this.values;
      
          case 1:
            return this.values.filter((value) => {
              var firstName = arguments[0];
              return value.indexOf(firstName) !== -1 ? true : false;
            });
      
          case 2:
            return this.values.filter((value) => {
              var fullName = `${arguments[0]} ${arguments[1]}`;
              return value.indexOf(fullName) !== -1 ? true : false;
            });
        }
      };
    }

    return Reflect.get(target , key , receiver);
  },

  set: function (target, key, value, receiver) {
    return Reflect.set(target, key, value, receiver);
  }
});

console.log(proxy.find());                     // ["Dean Edwards", "Sam Stephenson", "Alex Russell", "Dean Tom"]
console.log(proxy.find('Dean'));               // ["Dean Edwards", "Dean Tom"]
console.log(proxy.find('Dean', 'Edwards'));   // ["Dean Edwards"]

這樣寫其實感受有點多此一舉了，就當成是另一種思路吧。ip