观点

重载是指函数或许要领有雷同的称号，然则参数个数或范例不雷同的情况，如许的同名差别参的函数或许要领之间，相互称之为重载函数或要领。

我们晓得，JavaScript函数能够随便通报恣意数目、恣意范例的参数，那末它有没有重载呢？

答案是有的，下面我们经由过程3种要领来完成JavaScript的函数重载。

完成

0. 目的

我们有一个people对象

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"]

这类体式格局人人一定都能看懂，就不多说啦。

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)要领是中心。我们偏重剖析一下为何这里会有闭包，能够保留上一个注册的函数。

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函数实行完后，依然被别的的变量所援用，致使它的实行环境没法烧毁，所以产生了闭包。

因而，每次挪用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"]

如许写实在觉得有点弄巧成拙了，就当做是别的一种思绪吧。

总结

JavaScript能够完成函数重载，主要有两种头脑：

1. 应用arguments类数组来推断吸收参数的个数
2. 应用闭包保留之前注册进来的同名函数

迎接关注我的民众号