美文网首页
JS函数的重载(多态)

JS函数的重载(多态)

作者: 常连海 | 来源:发表于2017-06-12 17:59 被阅读0次
其它面向对象语言如Java的一个常见特性是:能够根据传入的不同数量量或类型的参数,通过“重载”函数来发挥不同的功用。但是这个特性在Javascript中并没有被直接支持,可是有很多办法实现这一功能。

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

function sum() {
   var total = null;
   for (var i=0,len=arguments.length;i<len;i++) {
       var cur = Number(arguments[i]); 
       if (!isNaN(cur) {
           total += cur;
      }
  }
 return total;
};
 sum(1, 2, 3); //--->> 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函数的重载(多态)

    其它面向对象语言如Java的一个常见特性是:能够根据传入的不同数量量或类型的参数,通过“重载”函数来发挥不同的功用...

  • 六、多态与虚函数

    多态的基本概念 多态 多态分为编译时多态和运行时多态。 编译时多态主要是指函数的重载(包括运算符的重载)。对重载函...

  • 2020-07-06----《C++类的学习》

    函数重载:同名不同参。 C++类的特点:封装、继承、多态。 //多态与函数重载是啥关系? 虚函数:和软件架构相关 ...

  • C++运算符重载

    C++运算符重载的实质:运算符重载的实质就是函数重载或函数多态。运算符重载是一种形式的C++多态。目的在于让人能够...

  • 2019-08-27

    Javascript的多态性 1.js不支持重载 /*****************说明js不支持重载*****...

  • OOP(多态,重载,重写,虚方法,密封类)

    多态 学习OOp多态*1.方法重载*2.方法重写*3.里氏替换原则**方法重载:构造函数就属于特殊的方法重载*方...

  • 多态

    静多态 静多态,也就是我们说的函数重载。表面来看,是由重载规则来限定的,内部实现 却是 Namemangling。...

  • 查漏补缺

    C++虚函数: 多态: 静态多态(重载)、动态多态(虚函数) 虚函数 虚函数表:编译器为每个类创建了一个虚函数表...

  • CPP函数重载、覆盖的实现原理

    函数重载 函数重载也被成为编译时多态。 函数重载是在同一命名空间中,根据参数列表对同名函数的编译时绑定(resol...

  • 多态和虚函数

    多态可以分为静态多态和动态多态 静态多态:函数重载,泛型编程,编译器在编译期间内完成的,编译器根据函数实参的类型可...

网友评论

      本文标题:JS函数的重载(多态)

      本文链接:https://www.haomeiwen.com/subject/jgwlqxtx.html