《JavaScript设计模式》——2.5 多种调用方式——多态

简介: 多态,就是同一个方法多种调用方式吧。在JavaScript中也是可以实现的,只不过要对传入的参数做判断以实现多种调用方式,如我们定义一个add方法,如果不传参数则返回10,如果传一个参数则返回10+参数,如果传两个参数则返回两个参数相加的结果。

本节书摘来自异步社区《JavaScript设计模式》一书中的第2章,第2.5节,作者:张容铭著,更多章节内容可以访问云栖社区“异步社区”公众号查看

2.5 多种调用方式——多态

“小铭,在面向对象编程中不是还有一种特性叫作多态么?在JavaScript中可以实现么?”

“多态,就是同一个方法多种调用方式吧。在JavaScript中也是可以实现的,只不过要对传入的参数做判断以实现多种调用方式,如我们定义一个add方法,如果不传参数则返回10,如果传一个参数则返回10+参数,如果传两个参数则返回两个参数相加的结果。”

//多态
function add(){
    // 获取参数
  var arg = arguments,
    // 获取参数长度
    len = arg.length;
  switch(len){
    // 如果没有参数
    case 0:
      return 10;
    // 如果只有一个参数
    case 1:
      return 10 + arg[0];
    // 如果有两个参数
    case 2:
      return arg[0] + arg[1];
  }
}
// 测试用例
console.log(add());    // 10
console.log(add(5));    // 15
console.log(add(6,7));    // 13

“当然我们还可以让其转化成更易懂的类形式:”

function Add(){
  // 无参数算法
  function zero(){
    return 10;
  }
  // 一个参数算法
  function one(num){
    return 10 + num;
  }
  // 两个参数算法
  function two(num1, num2){
    return num1 + num2;
  }
  // 相加共有方法
  this.add = function(){
    var arg = arguments,
    // 获取参数长度
    len = arg.length;
    switch(len){
      // 如果没有参数
      case 0:
        return zero();
      // 如果只有一个参数
      case 1:
        return one(arg[0]);
      // 如果有两个参数
      case 2:
        return two(arg[0], arg[1]);
    }
  }  
}
// 实例化类
var A = new Add();
//测试
console.log(A.add());    // 10
console.log(A.add(5));    // 15
console.log(A.add(6,7));  // 13

“对于多态类,当我们调用add运算方法时,他会根据传参不同做相应运算,当然我们将不同运算方法封装在类内,这样代码更易懂。”

相关文章
|
2月前
|
设计模式 JavaScript 前端开发
js设计模式【详解】—— 职责链模式
js设计模式【详解】—— 职责链模式
63 8
|
2月前
|
设计模式 JavaScript 前端开发
js设计模式【详解】—— 组合模式
js设计模式【详解】—— 组合模式
39 7
|
21天前
|
设计模式 JavaScript 前端开发
从工厂到单例再到策略:Vue.js高效应用JavaScript设计模式
【8月更文挑战第30天】在现代Web开发中,结合使用JavaScript设计模式与框架如Vue.js能显著提升代码质量和项目的可维护性。本文探讨了常见JavaScript设计模式及其在Vue.js中的应用。通过具体示例介绍了工厂模式、单例模式和策略模式的应用场景及其实现方法。例如,工厂模式通过`NavFactory`根据用户角色动态创建不同的导航栏组件;单例模式则通过全局事件总线`eventBus`实现跨组件通信;策略模式用于处理不同的表单验证规则。这些设计模式的应用不仅提高了代码的复用性和灵活性,还增强了Vue应用的整体质量。
14 0
|
1月前
|
设计模式 JavaScript 前端开发
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
|
2月前
|
设计模式 JavaScript Go
js设计模式【详解】—— 状态模式
js设计模式【详解】—— 状态模式
40 7
|
2月前
|
设计模式 JavaScript
js设计模式【详解】—— 桥接模式
js设计模式【详解】—— 桥接模式
48 6
|
2月前
|
设计模式 JavaScript
js设计模式【详解】—— 原型模式
js设计模式【详解】—— 原型模式
36 6
|
2月前
|
设计模式 JavaScript 算法
js设计模式【详解】—— 模板方法模式
js设计模式【详解】—— 模板方法模式
38 6
|
2月前
|
设计模式 存储 JavaScript
js设计模式【详解】—— 享元模式
js设计模式【详解】—— 享元模式
40 6
|
2月前
|
设计模式 JavaScript API
js设计模式【详解】—— 命令模式
js设计模式【详解】—— 命令模式
33 6