首页 > 其他分享 >8.前端设计模式之混合模式

8.前端设计模式之混合模式

时间:2023-09-15 23:35:45浏览次数:40  
标签:name 前端 dog Dog wagTail 混合 bark 设计模式 log

Maxin Pattern: Add functionality to objects or classes without inheritance

在不使用的继承的情况下为对象或者类添加功能

在JavaScript中混合也是通过原型链实现的。

比如有个Dog类:

class Dog {
  constructor(name) {
    this.name = name;
  }
}

现在我们希望为Dog类添加bark、wagTail、play方法

const dogFunctionality = {
  bark: () => console.log("Woof!"),
  wagTail: () => console.log("Wagging my tail!"),
  play: () => console.log("Playing!"),
};

在不直接修改Dog类避免使用继承的情况下,我们可以修改Dog类的原型:

Object.assign(Dog.prototype, dogFunctionality);

这样所有的dog示例都有了bark、wagTail、paly方法:

const dog = new Dog("Daisy");
dog.name; // Daisy
dog.bark(); // Woof!
dog.play(); // Playing!


标签:name,前端,dog,Dog,wagTail,混合,bark,设计模式,log
From: https://blog.51cto.com/u_14256460/7488562

相关文章

  • 在工作流引擎设计领域,是否自动计算未来的处理人的设计模式有哪些?
    概述流程的第一个节点发送下去的时候,就要把以后所有节点的处理人计算出来,能清楚的知道每个节点都是那些人处理.计算未来处理人包括抄送节点、与待办节点.默认的模式为:每个节点发送的时候即使计算,就是不计算未来处理人.流程设计特征.流程的所有节点的接受人不能是主管选择的,只能......
  • web 前端 tips:js 继承 —— 组合继承
    上篇文章给大家分享了js继承中的组合继承web前端tips:js继承——组合继承今天给大家分享一下js继承中的原型式继承原型式继承JavaScript的原型式继承是一种基于对象的继承方式,通过复制一个对象的属性和方法来创建一个新对象,并将原对象作为新对象的原型。这种继承方式可以......
  • HarmonyOS应用侧与前端页面数据通道建立
    一、 应用侧调用前端页面函数应用侧可以通过runJavaScript()方法调用前端页面的JavaScript相关函数。在下面的示例中,点击应用侧的“runJavaScript”按钮时,来触发前端页面的htmlTest()方法。● 前端页面代码。<!--index.html--><!DOCTYPEhtml><html><body><script>......
  • 前端生成二维码,qrcode使用说明,canvas查看大图
    生成二维码用于vue项目通过字符串转换生成二维码的三方插件安装插件npminstall--saveqrcode引入使用importQRCodefrom"qrcode"页面<!--放置二维码的容器--><canvas:id="'qrCode_id'+stringxxxxx"class="qrCode_style"></canvas><!--可......
  • HarmonyOS应用侧与前端页面数据通道建立
     一、 应用侧调用前端页面函数应用侧可以通过runJavaScript()方法调用前端页面的JavaScript相关函数。在下面的示例中,点击应用侧的“runJavaScript”按钮时,来触发前端页面的htmlTest()方法。● 前端页面代码。 <!--index.html--><!DOCTYPEhtml><html><body><sc......
  • 每日一练:无感刷新页面(附可运行的前后端源码,前端vue,后端node)
    1、前言想象下,你正常在网页上浏览页面。突然弹出一个窗口,告诉你登录失效,跳回了登录页面,让你重新登录。你是不是很恼火。这时候无感刷新的作用就体现出来了。2、方案2.1redis设置过期时间在最新的技术当中,token一般都是在Redis服务器存着,设置过期时间。只要在有效时间内,重新发......
  • 设计模式 C++
    (设计模式)(李建忠C++)23种设计模式组件协作模板方法父类中定义组件(函数)的调用流程,每个组件使用虚函数进行实现,然后子类中可以重写父类中虚函数的实现。如果我们发现一个算法的组件(函数)的调用流程都是一样的,但是步骤中的各个组件的实现可能有所差异,此时会使用模板方法。【......
  • django—实现前端页面批量删除功能
    views.py代码:fromdjango.shortcutsimportrender,redirectfrom.modelsimportYourModel#使用你实际的模型名称替换defbatch_delete(request):ifrequest.method=='POST':ids=request.POST.get('ids')ifids:......
  • 软件设计模式系列之六——单例模式
    1模式的定义单例模式(SingletonPattern)是一种常见的创建型设计模式,其主要目的是确保一个类只有一个实例,并提供一个全局访问点来获取该实例。这意味着无论何时何地,只要需要该类的实例,都会返回同一个实例,而不是创建多个相同的实例。单例模式通常用于管理全局状态、资源共享或限制......
  • less-混合
    @width:200px;@border:1pxsolidred;div{margin:10px0;border-radius:10px;}.txt-center{font-size:20px/40px'微软雅黑';color:#fff;text-align:center;line-height:@width;background:green;}//混合:把另一个选......