JavaScript实现函数重载

栏目: JavaScript · 发布时间: 6年前

内容简介：重载是指函数或者方法有相同的名称，但是参数个数或类型不相同的情形，这样的同名不同参的函数或者方法之间，互相称之为重载函数或方法。我们知道，JavaScript函数可以随意传递任意数量、任意类型的参数，那么它有没有重载呢？

JavaScript实现函数重载

重载是指函数或者方法有相同的名称，但是参数个数或类型不相同的情形，这样的同名不同参的函数或者方法之间，互相称之为重载函数或方法。

我们知道，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可以实现函数重载，主要有两种思想：

利用arguments类数组来判断接收参数的个数
利用闭包保存以前注册进来的同名函数

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

运营有道：重新定义互联网运营

李明轩 / 机械工业出版社 / 2017-7-31 / 69.00元

本书是前百度资深运营专家多年运营经验的总结，是作者运营千万级用户规模的大型互联网产品的实操经验复盘，是作者在“在行”上为近百位CEO和高管提供互联网运营咨询服务后对互联网运营需求的深入洞见。本书的思想基础是“运营必须以用户为中心”，从产品、用户、市场3个维度对互联网运营重新进行了系统性的梳理：从道的层面解读并重新定义运营方法论，从术的层面围绕方法论提出行之有效的解决方法和实际案例。重点不在......一起来看看《运营有道：重新定义互联网运营》这本书的介绍吧!

码农工具