JS函数的重载(多态)

其它面向对象语言如Java的一个常见特性是:能够根据传入的不同数量量或类型的参数,通过“重载”函数来发挥不同的功用。但是这个特性在Javascript中并没有被直接支持,可是有很多办法实现这一功能。

< JS严格上没有函数重载的,但是可以使用arguments和实参的类型进行模拟 >
arguments案例: 任意数求和

function sum() {
   var total = null;
   for (var i=0,len=arguments.length;i> 6
 sum(1, '10'); // --->> 11

核心:

  • 1 参数的个数( (arguments对象的使用)
  • 2 参数的类型 (typeof检测数据类型的使用)

argument: 函数内部的一个对象,用来接收函数执行所传入实参,他是一个类数组,有length属性,但是不能使用数组的方法, 只能在函数内部使用.

function sum(x) {
    console.log(x);
}

function sum(x, y) {
    console.log(x+y);  //--->>3
}
sum(1);
sum(1, 2);
后面的函数覆盖了前面的函数,因为同一个变量,地址覆盖了

1.依据函数实参的个数来进行模拟函数的重载

  var Add = function () {
  var len = arguments.length; //获取函数实参的个数
  if (len === 0) {
      console.log('no-param');
      return this;
  } else if(len === 1) {
      console.log('one-param');
      return this;
  } else if(len ===2) {
      console.log('two-param');
      return this;
  } else {
      console.log('param > 2');
      return this;
  }
};

Add();
Add(1);
Add(1, 2);
Add(1, 2, 3);

2.依据形参的类型进行模拟函数的重载

   var Add = function () {
    if (typeof arguments[0] === 'number') {
        console.log('number-type-one-param');
    }

    if (typeof arguments[0] === 'string') {
        console.log('string-type-one-param');
    }
   };
   Add(10);
   Add('100');

3.俩种方式混合进行使用

    var Add = function () {
      if (arguments.length === 2 &&  typeof  arguments[0] === 'number') {
        console.log('prarm-2, first-parma-type-number');
     }

    if (arguments.length === 2 && typeof arguments[0] ==='string') {
        console.log('prarm-2, first-parma-type-string');
    }
};
Add(1 , 20);
Add('10' , 20);

4.案例,针对卡片进行增删改查功能

   var Card = function (type, id) {
    var len = arguments.length,
        type = typeof arguments[0],
        value = arguments[0];
    if ((len===2) && (type === 'string') && (value === 'delete')) {
        console.log('delete-card');
        return false;
    }

    if ((len === 2) && (type === 'string') && (value === 'update')) {
        console.log('update-card');
        return false;
    }

    if ((len === 2) && (type === 'string') && (value === 'addCard')) {
        console.log('addCard-card');
        return false;
    }

    if ((len === 2) && (type === 'string') && (value === 'search')) {
        console.log('searchcard-card');
        return false;
    }
};
Card('addCard', '10012');
Card('delete', '10012');
Card('update', '10012');
Card('search', '10012');

你可能感兴趣的:(JS函数的重载(多态))