[JS设计模式]Mixin Pattern

Mixin是一个对象,我们可以使用它来为另一个对象或类添加可重用的功能,而无需使用继承。我们不能单独使用mixins:它们的唯一目的是在没有继承的情况下向对象或类添加功能。

假设对于我们的应用程序,我们需要创建多个狗。然而,我们创建的基本狗没有任何属性,只有一个name属性。

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

一只狗能做的不仅仅是有一个名字。它应该会叫,会摇尾巴,会玩!我们可以创建一个mixin,为我们提供bark, wagTail和play属性,而不是直接添加到Dog类中。

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

我们可以用Object.assigndogFunctionality添加到Dog原型中。这样Dog的每个新实例都可以访问dogFunctionality的属性,因为它们被添加到Dog的原型中!

class Dog {constructor(name) {this.name = name;}
}const dogFunctionality = {bark: () => console.log("Woof!"),wagTail: () => console.log("Wagging my tail!"),play: () => console.log("Playing!"),
};Object.assign(Dog.prototype, dogFunctionality);

现在可以创建我们的第一个宠物叫卡迪。正如我们刚刚将dogFunctionality mixin添加到Dog的原型中一样,卡迪应该能够走路、摇尾巴和玩耍!

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

虽然我们可以在没有继承的情况下使用mixin添加功能,但是mixin本身可以使用继承。
大多数哺乳动物(除了海豚…也许更多)也能走路和睡觉。狗是哺乳动物,应该能够走路和睡觉。

接下来创建一个animalFunctionality mixin,它有 walksleep 属性。

const animalFunctionality = {walk: () => console.log("Walking!"),sleep: () => console.log("Sleeping!"),
};

walksleep属性通过 Object.assign方法添加到dogFunctionality原型中。在这个例子中, dogFunctionality是目标对象。

const animalFunctionality = {walk: () => console.log("Walking!"),sleep: () => console.log("Sleeping!"),
};const dogFunctionality = {bark: () => console.log("Woof!"),wagTail: () => console.log("Wagging my tail!"),play: () => console.log("Playing!"),walk() {super.walk();},sleep() {super.sleep();},
};Object.assign(dogFunctionality, animalFunctionality);
Object.assign(Dog.prototype, dogFunctionality);

完整示例代码

class Dog {constructor(name) {this.name = name;}
}const animalFunctionality = {walk: () => console.log("Walking..."),sleep: () => console.log("Sleeping..."),
};const dogFunctionality = {__proto__: animalFunctionality,bark: () => console.log("Woof!"),wagTail: () => console.log("Wagging my tail!"),play: () => console.log("Playing!"),walk() {super.walk();},sleep() {super.sleep();}
};Object.assign(Dog.prototype, dogFunctionality);const pet1 = new Dog("Kadi");console.log(pet1.name);
pet1.bark();
pet1.wagTail();
pet1.walk();

请添加图片描述

小知识

Object.assign()

静态方法将一个或者多个源对象中所有可枚举自有属性复制到目标对象,并返回修改后的目标对象。

[语法]
Object.assign(target, ...sources)
[参数]
  • [target]

    需要应用源对象属性的目标对象,修改后将作为返回值。

  • [sources]

    一个或多个包含要应用的属性的源对象。

[返回值]

修改后的目标对象。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/223394.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

STM32实现三个小灯亮

led.c #include"led.h"void Led_Init(void) {GPIO_InitTypeDef GPIO_VALUE; //???RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOC,ENABLE);//???GPIO_VALUE.GPIO_ModeGPIO_Mode_Out_PP;//???? ????GPIO_VALUE.GPIO_PinGPIO_Pin_1|GPIO_Pin_2|GPIO_P…

Docker - 镜像 | 容器 日常开发常用指令 + 演示(一文通关)

目录 Docker 开发常用指令汇总 辅助命令 docker version docker info docker --help 镜像命令 查看镜像信息 下载镜像 搜索镜像 删除镜像 容器命令 查看运行中的容器 运行容器 停止、启动、重启、暂停、恢复容器 杀死容器 删除容器 查看容器日志 进入容器内部…

Linux创建macvlan 测试bridge、private和vepa模式

Linux创建macvlan,测试bridge、private和vepa模式 最近在看Docker的网络,看到关于macvlan网络的介绍。查阅了相关资料,记录如下。 参考 1.Linux Macvlan 2.图解几个与Linux网络虚拟化相关的虚拟网卡-VETH/MACVLAN/MACVTAP/IPVLAN 环境 操…

谷粒商城-商品服务-新增商品功能开发(商品图片无法展示问题没有解决)

在网关配置路由 - id: member_routeuri: lb://gulimemberpredicates:- Path/api/gulimember/**filters:- RewritePath/api/(?<segment>.*),/$\{segment}并将所有逆向生成的工程调式出来 获取分类关联的品牌 例如&#xff1a;手机&#xff08;分类&#xff09;-> 品…

采用SpringBoot框架+原生HTML、JS前后端分离模式开发和部署的电子病历编辑器源码(电子病历评级4级)

概述&#xff1a; 电子病历是指医务人员在医疗活动过程中,使用医疗机构信息系统生成的文字、符号、图表、图形、数据、影像等数字化信息,并能实现存储、管理、传输和重现的医疗记录,是病历的一种记录形式。 医院通过电子病历以电子化方式记录患者就诊的信息&#xff0c;包括&…

【智慧办公】如何让智能会议室的电子标签实现远程、批量更新信息?东胜物联网硬件网关让解决方案更具竞争力

近年来&#xff0c;为了减少办公耗能、节能环保、降本增效&#xff0c;越来越多的企业开始从传统的办公模式转向智慧办公。 以智能会议室为例&#xff0c;会议是企业业务中不可或缺的一部分&#xff0c;但在传统办公模式下&#xff0c;一来会议前行政人员需要提前准备会议材料…

助力打造清洁环境,基于YOLOv4开发构建公共场景下垃圾堆放垃圾桶溢出检测识别系统

公共社区环境生活垃圾基本上是我们每个人每天几乎都无法避免的一个问题&#xff0c;公共环境下垃圾投放点都会有固定的值班时间&#xff0c;但是考虑到实际扔垃圾的无规律性&#xff0c;往往会出现在无人值守的时段内垃圾堆放垃圾桶溢出等问题&#xff0c;有些容易扩散的垃圾比…

【数据结构入门精讲 | 第十篇】考研408排序算法专项练习(二)

在上文中我们进行了排序算法的判断题、选择题的专项练习&#xff0c;在这一篇中我们将进行排序算法中编程题的练习。 目录 编程题R7-1 字符串的冒泡排序R7-1 抢红包R7-1 PAT排名汇总R7-2 统计工龄R7-1 插入排序还是堆排序R7-2 龙龙送外卖R7-3 家谱处理 编程题 R7-1 字符串的冒…

SpringSecurity深度解析与实践(3)

这里写自定义目录标题 引言SpringSecurity之授权授权介绍java权限集成 登录失败三次用户上锁 引言 SpringSecurity深度解析与实践&#xff08;2&#xff09;的网址 SpringSecurity之授权 授权介绍 Spring Security 中的授权分为两种类型&#xff1a; 基于角色的授权&#…

LV.13 D6 Linux内核安装及交叉编译 学习笔记

一、tftp加载Linux内核及rootfs 1.1 uboot内核启动命令 bootm 启动指定内存地址上的Linux内核并为内核传递参数 bootm kernel-addr ramdisk-addr dtb-addr 注: kernel-addr: 内核的下载地址 ramdisk-addr: 根文件系统的下载地址 …

.Net 访问电子邮箱-LumiSoft.Net,好用

序言&#xff1a; 网上找了很多关于.Net如何访问电子邮箱的方法&#xff0c;但是大多数都达不到想要的需求&#xff0c;只有一些 收发邮件。因此 花了很大功夫去看 LumiSoft.Net.dll 的源码&#xff0c;总算做出自己想要的结果了&#xff0c;果然学习诗人进步。 介绍&#xff…

使用@jiaminghi/data-view实现一个数据大屏

<template><div class"content bg"><!-- 全局容器 --><!-- <dv-full-screen-container> --><!-- 第二行 --><div class"module-box" style"align-items: start; margin-top: 10px"><!-- 左 -->…

redis基本用法学习(C#调用CSRedisCore操作redis)

除了NRedisStack包&#xff0c;csredis也是常用的redis操作模块&#xff08;从EasyCaching提供的常用redis操作包来看&#xff0c;CSRedis、freeredis、StackExchange.Redis应该都属于常用redis操作模块&#xff09;&#xff0c;本文学习使用C#调用CSRedis包操作redis的基本方式…

C# WPF上位机开发(从demo编写到项目开发)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 C# WPF编程&#xff0c;特别是控件部分&#xff0c;其实学起来特别快。只是后面多了多线程、锁、数据库、网络这部分稍微复杂一点&#xff0c;不过…

交通流预测 | Matlab基于KNN-BiLSTM的交通流预测(对比SVR、LSTM、GRU、KNN-LSTM)

目录 预测效果基本介绍程序设计参考资料 预测效果 基本介绍 交通流预测 | Matlab基于KNN-BiLSTM的交通流预测&#xff08;对比SVR、LSTM、GRU、KNN-LSTM&#xff09; 程序设计 完整程序和数据获取方式&#xff1a;私信博主回复Matlab基于KNN-BiLSTM的交通流预测&#xff08;对…

oracle即时客户端(Instant Client)安装与配置

之前的文章记录了oracle客户端和服务端的下载与安装&#xff0c;内容参见&#xff1a; 在Windows中安装Oracle_windows安装oracle 如果不想安装oracle客户端&#xff08;或者是电脑因为某些原因无法安装oracle客户端&#xff09;&#xff0c;还想能够连接oracle远程服务&#…

网络安全行业术语

病毒 是在计算机程序中插入的破坏计算机功能或者数据的代码&#xff0c;能影响计算机使用&#xff0c;能自我复制的一组计算机指令或者程序代码。 抓鸡 利用使用大量的程序的漏洞&#xff0c;使用自动化方式获取肉鸡的行为&#xff0c;即设法控制电脑&#xff0c;将其沦为肉…

【银行测试】银行金融测试+金融项目测试点汇总...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、银行金融测试是…

OpenCV | 霍夫变换:以车道线检测为例

霍夫变换 霍夫变换只能灰度图&#xff0c;彩色图会报错 lines cv2.HoughLinesP(edge_img,1,np.pi/180,15,minLineLength40,maxLineGap20) 参数1&#xff1a;要检测的图片矩阵参数2&#xff1a;距离r的精度&#xff0c;值越大&#xff0c;考虑越多的线参数3&#xff1a;距离…

制造行业定制软件解决方案——工业信息采集平台

摘要&#xff1a;针对目前企业在线检测数据信号种类繁多&#xff0c;缺乏统一监控人员和及时处置措施等问题。蓝鹏测控开发针对企业工业生产的在线数据的集中采集分析平台&#xff0c;通过该工业信息采集平台可将企业日常各种仪表设备能够得到数据进行集中分析处理存储&#xf…