【前端面试手撕题】简易深拷贝、深拷贝、寄生组合式继承、发布订阅模式、观察者模式
FED16 简易深拷贝
描述
请补全JavaScript代码,要求实现对象参数的深拷贝并返回拷贝之后的新对象。
注意:
- 参数对象和参数对象的每个数据项的数据类型范围仅在数组、普通对象({})、基本数据类型中]
- 无需考虑循环引用问题
<!DOCTYPE html>
<html><head><meta charset=utf-8></head><body><script type="text/javascript">const _sampleDeepClone = target => {// 补全代码if(typeof target === 'object'&&target!==null){const cloneTarget=Array.isArray(target)?[]:{};for(prop in target){if(target.hasOwnProperty(prop)){cloneTarget[prop]=_sampleDeepClone(target[prop])}}return cloneTarget}else{return target}}</script></body>
</html>
FED17 深拷贝
描述
请补全JavaScript代码,要求实现对象参数的深拷贝并返回拷贝之后的新对象。
注意:
- 需要考虑函数、正则、日期、ES6新对象
- 需要考虑循环引用问题
<!DOCTYPE html>
<html><head><meta charset=utf-8></head><body><script type="text/javascript">const _completeDeepClone = (target, map = new Map()) => {// 补全代码if(target===null) return targetif(typeof target!=='object') return targetconst constructor=target.constructorif(/^(Function|RegExp|Date|Map|Set)$/i.test(constructor.name)) return new constructor(target)if(map.get(target)) return map.get(target)map.set(target,true)const cloneTarget=Array.isArray(target)?[]:{}for(prop in target){if(target.hasOwnProperty(prop)){cloneTarget[prop]=_completeDeepClone(target[prop],map)}}return cloneTarget}</script></body>
</html>
FED18 寄生组合式继承
描述
请补全JavaScript代码,要求通过寄生组合式继承使"Chinese"构造函数继承于"Human"构造函数。要求如下:
- 给"Human"构造函数的原型上添加"getName"函数,该函数返回调用该函数对象的"name"属性
- 给"Chinese"构造函数的原型上添加"getAge"函数,该函数返回调用该函数对象的"age"属性
<!DOCTYPE html>
<html><head><meta charset=utf-8></head><body><script type="text/javascript">// 补全代码function Human(name) {this.name = namethis.kingdom = 'animal'this.color = ['yellow', 'white', 'brown', 'black']}Human.prototype.getName=function(){return this.name}function Chinese(name,age) {Human.call(this,name)this.age=agethis.color = 'yellow'}Chinese.prototype=Object.create(Human.prototype)Chinese.prototype.constructor=ChineseChinese.prototype.getAge=function(){return this.age}</script></body>
</html>
FED19 发布订阅模式
描述
请补全JavaScript代码,完成"EventEmitter"类实现发布订阅模式。
注意:
- 同一名称事件可能有多个不同的执行函数
- 通过"on"函数添加事件
- 通过"emit"函数触发事件
<!DOCTYPE html>
<html><head><meta charset=utf-8></head><body><script type="text/javascript">class EventEmitter {// 补全代码constructor(){this.events={}}on(event,fn){if(!this.events[event]){this.events[event]=[fn]}else{this.events[event].push(fn)}}emit(event){if(this.events[event]){this.events[event].forEach(callback=>callback())}}}</script></body>
</html>
FED20 观察者模式
描述
请补全JavaScript代码,完成"Observer"、"Observerd"类实现观察者模式。要求如下:
- 被观察者构造函数需要包含"name"属性和"state"属性且"state"初始值为"走路"
- 被观察者创建"setObserver"函数用于保存观察者们
- 被观察者创建"setState"函数用于设置该观察者"state"并且通知所有观察者
- 观察者创建"update"函数用于被观察者进行消息通知,该函数需要打印(console.log)数据,数据格式为:小明正在走路。其中"小明"为被观察者的"name"属性,"走路"为被观察者的"state"属性
注意: - "Observer"为观察者,"Observerd"为被观察者
<!DOCTYPE html>
<html><head><meta charset=utf-8></head><body><script type="text/javascript">// 补全代码class Observerd {constructor(name){this.name=name;this.state='走路';this.Observers=[];}setObserver(Observer){this.Observers.push(Observer);}setState(state){this.state=state;this.Observers.forEach(observer=>observer.update(this))}}class Observer {constructor(){}update(Observerd){console.log(Observerd.name+'正在'+Observerd.state)}}</script></body>
</html>
相关文章:
【前端面试手撕题】简易深拷贝、深拷贝、寄生组合式继承、发布订阅模式、观察者模式
FED16 简易深拷贝 描述 请补全JavaScript代码,要求实现对象参数的深拷贝并返回拷贝之后的新对象。 注意: 参数对象和参数对象的每个数据项的数据类型范围仅在数组、普通对象({})、基本数据类型中]无需考虑循环引用问题 <!DO…...
【生物医学】应激(应激反应)全身适应综合征
最近在探索疲劳、负荷、应激方面的底层发生机制,遂整理了一些相关内容,以脑图方式呈现。本文以生物医学向为主。 OK,开始基础介绍:应激 (stress)是指在收到外部或内部、心理社会刺激下的非特异性适应反应。 本文主要收集整理了相…...
浅析基于安防监控EasyCVR视频汇聚融合技术的运输管理系统
一、项目背景 近年来,随着物流行业迅速发展,物流运输费用高、运输过程不透明、货损货差率高、供应链协同能力差等问题不断涌现,严重影响了物流作业效率,市场对于运输管理数字化需求愈发迫切。当前运输行业存在的难题如下…...
VBA技术资料MF41:VBA_将常规数字转换为文本数字
【分享成果,随喜正能量】时有落花至,远随流水香。人生漫长,不攀缘,不强求,按照自己喜欢的方式生活,不必太过在意,顺其自然就好。路再长也有终点,夜再黑也有尽头。 我给VBA的定义&am…...
Wavefront .OBJ文件格式解读【3D】
OBJ(或 .OBJ)是一种几何定义文件格式,最初由 Wavefront Technologies 为其高级可视化器动画包开发。 该文件格式是开放的,已被其他 3D 图形应用程序供应商采用。 OBJ 文件格式是一种简单的数据格式,仅表示 3D 几何体&…...
JavaScript:ES6中类与继承
在JavaScript编程中,ES6引入了一种更现代、更清晰的方式来定义对象和实现继承,那就是通过类和继承机制。本文将以通俗易懂的方式解释ES6中类与继承的概念,帮助你更好地理解和应用这些特性。 1. 类的创建与使用 类是一种模板,用于…...
通用指令(汇编)
一、数据处理指令1)数学运算数据运算指令的格式数据搬移指令立即数伪指令加法指令带进位的加法指令减法指令带借位的减法指令逆向减法指令乘法指令数据运算指令的扩展 2)逻辑运算按位与指令按位或指令按位异或指令左移指令右移指令位清零指令 3ÿ…...
苏宁数据治理实战方法论和三字经
随着移动互联网和大数据的蓬勃发展,“数据即资产”的理念深入人心。大数据已发展成为具有战略意义的生产资料,在各行各业发挥着极其重要的作用,而大数据也给很多企业带来了前所未有的自豪感和自信感。 但是,大数据真的是越“大”越…...
创建型设计模式:3、单例模式(C++实现实例 线程安全)
目录 1、单例模式(Singleton Pattern)的含义 2、单例模式的优缺点 (1)优点: (2)缺点: 3、C实现单例模式的示例(简单) 4、C实现单例模式的示例ÿ…...
JavaWeb学习笔记
Maven:自动导入配置jar包。 Maven项目架构管理工具:核心思想:约定大于配置 Maven:环境优化 1.修改web.xml为最新的 <?xml version"1.0" encoding"UTF-8"?> <web-app xmlns"http://xmlns.jcp.org/xml/ns/javaee&…...
ad+硬件每日学习十个知识点(24)23.8.4(时序约束,SignalTap Ⅱ)
文章目录 1.建立时间和保持时间2.为什么要建立时序约束?3.SignalTap Ⅱ4.SignalTap Ⅱ使用方法5.HDL的仿真软件(modelsim)6.阻抗匹配 1.建立时间和保持时间 答: 2.为什么要建立时序约束? 答: 3.Sign…...
FortiGate防火墙日志审计运维
环境介绍 CPU:8核,内存:16GB,硬盘:100GB 操作系统版本:CentOS-7-x86_64-DVD-2003 平台版本:鸿鹄2.7.0 安装组件 安装环境支持确认 鸿鹄计算引擎使用了 AVX2 高级指令集做向量计算加速…...
基于yolo v5与Deep Sort进行车辆以及速度检测与目标跟踪实战
项目实验结果展示: 基于yolo v5与Deep Sort进行车辆以及速度检测与目标跟踪实战——项目可以私聊 该项目可以作为毕业设计,以及企业级的项目开发,主要包含了车辆的目标检测、目标跟踪以及车辆的速度计算,同样可以进行二次开发。 …...
以指标驱动,保险、零售、制造企业开启精益敏捷运营的新范式
近日,以“释放数智生产力”为主题的 Kyligence 用户大会在上海前滩香格里拉大酒店成功举行。大会包含上午的主论坛和下午的 4 场平行论坛,并举办了闭门会议、Open Day 等活动。来自金融、零售、制造、医药等行业的客户及合作伙伴带来了超过 23 场主题演讲…...
MyBatis-动态SQL-foreach
目录 标签有以下常用属性: 小结 <froeach> <foreach>标签有以下常用属性: collection:指定要迭代的集合或数组的参数名(遍历的对象)。item:指定在迭代过程中的每个元素的别名(遍历…...
VUE框架:vue2转vue3全面细节总结(3)路由组件传参
大家好,我是csdn的博主:lqj_本人 这是我的个人博客主页: lqj_本人_python人工智能视觉(opencv)从入门到实战,前端,微信小程序-CSDN博客 最新的uniapp毕业设计专栏也放在下方了: https://blog.csdn.net/lbcy…...
音视频技术开发周刊 | 305
每周一期,纵览音视频技术领域的干货。 新闻投稿:contributelivevideostack.com。 大神回归学界:何恺明宣布加入 MIT 「作为一位 FAIR 研究科学家,我将于 2024 年加入麻省理工学院(MIT)电气工程与计算机科学…...
vue 图片base64转化
import html2canvas from ‘html2canvas’ html2canvas(canvasDom, options).then(canvas > { //此时的图片是base64格式的,我们将图片格式转换一下 let type ‘png’; let imgData canvas.toDataURL(type); // 照片格式处理 let _fixType function(type) { …...
TS学习03-类
类 calss A {name: stringconstructor(name:string) {this.name name}greet() {return hello, this.name} } let people new A(RenNing)继承 子类是一个派生类,他派生自父类(基类),通过 extends关键字 派生类通常被称作 子类…...
FastAPI(七)应用配置
目录 一、在apps下新建文件夹config 二、新建配置文件app_conf.py 一、在apps下新建文件夹config 二、新建配置文件app_conf.py from functools import lru_cachefrom pydantic.v1 import BaseSettingsclass AppConfig(BaseSettings):app_name: str "Windows10 插件&qu…...
HTML 语义化
目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案: 语义化标签: <header>:页头<nav>:导航<main>:主要内容<article>&#x…...
ES6从入门到精通:前言
ES6简介 ES6(ECMAScript 2015)是JavaScript语言的重大更新,引入了许多新特性,包括语法糖、新数据类型、模块化支持等,显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var…...
CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框,很难让人不联想到SQL注入,但提示都说了不是SQL注入,所以就不往这方面想了 先查看一下网页源码,发现一段JavaScript代码,有一个关键类ctfs…...
CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型
CVPR 2025 | MIMO:支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题:MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者:Yanyuan Chen, Dexuan Xu, Yu Hu…...
Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)
概述 在 Swift 开发语言中,各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过,在涉及到多个子类派生于基类进行多态模拟的场景下,…...
UDP(Echoserver)
网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法:netstat [选项] 功能:查看网络状态 常用选项: n 拒绝显示别名&#…...
屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!
5月28日,中天合创屋面分布式光伏发电项目顺利并网发电,该项目位于内蒙古自治区鄂尔多斯市乌审旗,项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站,总装机容量为9.96MWp。 项目投运后,每年可节约标煤3670…...
CocosCreator 之 JavaScript/TypeScript和Java的相互交互
引擎版本: 3.8.1 语言: JavaScript/TypeScript、C、Java 环境:Window 参考:Java原生反射机制 您好,我是鹤九日! 回顾 在上篇文章中:CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...
Matlab | matlab常用命令总结
常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...
RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程
本文较长,建议点赞收藏,以免遗失。更多AI大模型应用开发学习视频及资料,尽在聚客AI学院。 本文全面剖析RNN核心原理,深入讲解梯度消失/爆炸问题,并通过LSTM/GRU结构实现解决方案,提供时间序列预测和文本生成…...
