当前位置： 首页 > news >正文

【前端面试手撕题】简易深拷贝、深拷贝、寄生组合式继承、发布订阅模式、观察者模式

news 2026/3/30 16:47:06

FED16 简易深拷贝

描述
请补全JavaScript代码，要求实现对象参数的深拷贝并返回拷贝之后的新对象。
注意：

  1. 参数对象和参数对象的每个数据项的数据类型范围仅在数组、普通对象（{}）、基本数据类型中]
  2. 无需考虑循环引用问题
<!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代码，要求实现对象参数的深拷贝并返回拷贝之后的新对象。
注意：

  1. 需要考虑函数、正则、日期、ES6新对象
  2. 需要考虑循环引用问题
<!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"构造函数。要求如下：

  1. 给"Human"构造函数的原型上添加"getName"函数，该函数返回调用该函数对象的"name"属性
  2. 给"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"类实现发布订阅模式。
注意：

  1. 同一名称事件可能有多个不同的执行函数
  2. 通过"on"函数添加事件
  3. 通过"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"类实现观察者模式。要求如下：

  1. 被观察者构造函数需要包含"name"属性和"state"属性且"state"初始值为"走路"
  2. 被观察者创建"setObserver"函数用于保存观察者们
  3. 被观察者创建"setState"函数用于设置该观察者"state"并且通知所有观察者
  4. 观察者创建"update"函数用于被观察者进行消息通知，该函数需要打印（console.log）数据，数据格式为：小明正在走路。其中"小明"为被观察者的"name"属性，"走路"为被观察者的"state"属性
    注意：
  5. "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代码&#xff0c;要求实现对象参数的深拷贝并返回拷贝之后的新对象。 注意&#xff1a; 参数对象和参数对象的每个数据项的数据类型范围仅在数组、普通对象&#xff08;{}&#xff09;、基本数据类型中]无需考虑循环引用问题 <!DO…...

编程日记 2023/8/8 19:44:13

【生物医学】应激（应激反应）全身适应综合征

最近在探索疲劳、负荷、应激方面的底层发生机制&#xff0c;遂整理了一些相关内容&#xff0c;以脑图方式呈现。本文以生物医学向为主。 OK&#xff0c;开始基础介绍&#xff1a;应激 (stress)是指在收到外部或内部、心理社会刺激下的非特异性适应反应。 本文主要收集整理了相…...

编程日记 2023/8/8 19:43:12

浅析基于安防监控EasyCVR视频汇聚融合技术的运输管理系统

一、项目背景 近年来&#xff0c;随着物流行业迅速发展&#xff0c;物流运输费用高、运输过程不透明、货损货差率高、供应链协同能力差等问题不断涌现&#xff0c;严重影响了物流作业效率&#xff0c;市场对于运输管理数字化需求愈发迫切。当前运输行业存在的难题如下&#xf…...

编程日记 2023/8/8 19:42:10

VBA技术资料MF41：VBA_将常规数字转换为文本数字

【分享成果&#xff0c;随喜正能量】时有落花至&#xff0c;远随流水香。人生漫长&#xff0c;不攀缘&#xff0c;不强求&#xff0c;按照自己喜欢的方式生活&#xff0c;不必太过在意&#xff0c;顺其自然就好。路再长也有终点&#xff0c;夜再黑也有尽头。 我给VBA的定义&am…...

编程日记 2023/8/8 19:41:09

Wavefront .OBJ文件格式解读【3D】

OBJ&#xff08;或 .OBJ&#xff09;是一种几何定义文件格式&#xff0c;最初由 Wavefront Technologies 为其高级可视化器动画包开发。 该文件格式是开放的&#xff0c;已被其他 3D 图形应用程序供应商采用。 OBJ 文件格式是一种简单的数据格式&#xff0c;仅表示 3D 几何体&…...

编程日记 2023/8/8 19:40:08

JavaScript:ES6中类与继承

在JavaScript编程中&#xff0c;ES6引入了一种更现代、更清晰的方式来定义对象和实现继承&#xff0c;那就是通过类和继承机制。本文将以通俗易懂的方式解释ES6中类与继承的概念&#xff0c;帮助你更好地理解和应用这些特性。 1. 类的创建与使用 类是一种模板&#xff0c;用于…...

编程日记 2023/8/8 19:39:06

通用指令（汇编）

一、数据处理指令1&#xff09;数学运算数据运算指令的格式数据搬移指令立即数伪指令加法指令带进位的加法指令减法指令带借位的减法指令逆向减法指令乘法指令数据运算指令的扩展 2&#xff09;逻辑运算按位与指令按位或指令按位异或指令左移指令右移指令位清零指令 3&#xff…...

编程日记 2023/8/8 19:38:05

苏宁数据治理实战方法论和三字经

随着移动互联网和大数据的蓬勃发展&#xff0c;“数据即资产”的理念深入人心。大数据已发展成为具有战略意义的生产资料&#xff0c;在各行各业发挥着极其重要的作用&#xff0c;而大数据也给很多企业带来了前所未有的自豪感和自信感。 但是&#xff0c;大数据真的是越“大”越…...

编程日记 2023/8/8 19:37:04

创建型设计模式：3、单例模式（C++实现实例 线程安全）

目录 1、单例模式&#xff08;Singleton Pattern&#xff09;的含义 2、单例模式的优缺点 &#xff08;1&#xff09;优点&#xff1a; &#xff08;2&#xff09;缺点&#xff1a; 3、C实现单例模式的示例&#xff08;简单&#xff09; 4、C实现单例模式的示例&#xff…...

编程日记 2023/8/8 19:36:00

JavaWeb学习笔记

Maven:自动导入配置jar包。 Maven项目架构管理工具&#xff1a;核心思想&#xff1a;约定大于配置 Maven:环境优化 1.修改web.xml为最新的 <?xml version"1.0" encoding"UTF-8"?> <web-app xmlns"http://xmlns.jcp.org/xml/ns/javaee&…...

编程日记 2023/8/8 19:34:58

ad+硬件每日学习十个知识点（24）23.8.4（时序约束，SignalTap Ⅱ）

文章目录 1.建立时间和保持时间2.为什么要建立时序约束&#xff1f;3.SignalTap Ⅱ4.SignalTap Ⅱ使用方法5.HDL的仿真软件&#xff08;modelsim&#xff09;6.阻抗匹配 1.建立时间和保持时间 答&#xff1a; 2.为什么要建立时序约束&#xff1f; 答&#xff1a; 3.Sign…...

编程日记 2023/8/8 19:33:56

FortiGate防火墙日志审计运维

环境介绍 CPU&#xff1a;8核&#xff0c;内存&#xff1a;16GB&#xff0c;硬盘&#xff1a;100GB 操作系统版本&#xff1a;CentOS-7-x86_64-DVD-2003 平台版本&#xff1a;鸿鹄2.7.0 安装组件 安装环境支持确认 鸿鹄计算引擎使用了 AVX2 高级指令集做向量计算加速&#xf…...

编程日记 2023/8/8 19:32:55

基于yolo v5与Deep Sort进行车辆以及速度检测与目标跟踪实战

项目实验结果展示&#xff1a; 基于yolo v5与Deep Sort进行车辆以及速度检测与目标跟踪实战——项目可以私聊 该项目可以作为毕业设计&#xff0c;以及企业级的项目开发&#xff0c;主要包含了车辆的目标检测、目标跟踪以及车辆的速度计算&#xff0c;同样可以进行二次开发。 …...

编程日记 2023/8/8 19:31:54

以指标驱动，保险、零售、制造企业开启精益敏捷运营的新范式

近日&#xff0c;以“释放数智生产力”为主题的 Kyligence 用户大会在上海前滩香格里拉大酒店成功举行。大会包含上午的主论坛和下午的 4 场平行论坛&#xff0c;并举办了闭门会议、Open Day 等活动。来自金融、零售、制造、医药等行业的客户及合作伙伴带来了超过 23 场主题演讲…...

编程日记 2023/8/8 19:30:52

MyBatis-动态SQL-foreach

目录 标签有以下常用属性&#xff1a; 小结 <froeach> <foreach>标签有以下常用属性&#xff1a; collection&#xff1a;指定要迭代的集合或数组的参数名&#xff08;遍历的对象&#xff09;。item&#xff1a;指定在迭代过程中的每个元素的别名&#xff08;遍历…...

编程日记 2023/8/8 19:29:51

VUE框架：vue2转vue3全面细节总结（3）路由组件传参

大家好&#xff0c;我是csdn的博主&#xff1a;lqj_本人 这是我的个人博客主页&#xff1a; lqj_本人_python人工智能视觉&#xff08;opencv&#xff09;从入门到实战,前端,微信小程序-CSDN博客 最新的uniapp毕业设计专栏也放在下方了&#xff1a; https://blog.csdn.net/lbcy…...

编程日记 2023/8/8 19:28:49

音视频技术开发周刊 | 305

每周一期&#xff0c;纵览音视频技术领域的干货。 新闻投稿&#xff1a;contributelivevideostack.com。 大神回归学界&#xff1a;何恺明宣布加入 MIT 「作为一位 FAIR 研究科学家&#xff0c;我将于 2024 年加入麻省理工学院&#xff08;MIT&#xff09;电气工程与计算机科学…...

编程日记 2023/8/8 19:27:48

vue 图片base64转化

import html2canvas from ‘html2canvas’ html2canvas(canvasDom, options).then(canvas > { //此时的图片是base64格式的&#xff0c;我们将图片格式转换一下 let type ‘png’; let imgData canvas.toDataURL(type); // 照片格式处理 let _fixType function(type) { …...

编程日记 2023/8/8 19:26:45

TS学习03-类

类 calss A {name: stringconstructor(name:string) {this.name name}greet() {return hello, this.name} } let people new A(RenNing)继承 子类是一个派生类&#xff0c;他派生自父类&#xff08;基类&#xff09;&#xff0c;通过 extends关键字 派生类通常被称作 子类…...

编程日记 2023/8/8 19:25:43

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…...

编程日记 2023/8/8 19:24:42

低门槛AI视频生成新选择：opensora-hpcai本地部署与优化指南

低门槛AI视频生成新选择&#xff1a;opensora-hpcai本地部署与优化指南 【免费下载链接】opensora-hpcai-1_0_ms MindSpore implementation of OpenSora, an open-source project that aims to foster innovation, creativity, and inclusivity within the field of content cr…...

编程新知 2026/3/30 16:35:23

Tendis水平扩展实战：在线数据迁移与节点扩容最佳实践

Tendis水平扩展实战&#xff1a;在线数据迁移与节点扩容最佳实践 【免费下载链接】Tendis Tendis is a high-performance distributed storage system fully compatible with the Redis protocol. 项目地址: https://gitcode.com/gh_mirrors/te/Tendis Tendis作为腾讯开…...

编程新知 2026/3/30 16:27:15

MiniCPM-V-2_6代码截图理解：函数逻辑分析+注释生成效果展示

MiniCPM-V-2_6代码截图理解&#xff1a;函数逻辑分析注释生成效果展示 1. 引言&#xff1a;当AI能看懂代码截图 你有没有遇到过这样的情况&#xff1a;看到一个复杂的代码截图&#xff0c;想要理解其中的函数逻辑&#xff0c;却需要一行行手动输入代码&#xff1f;或者面对一…...

编程新知 2026/3/30 15:18:43

RPCS3完全攻略：从零开始打造你的PC端PS3游戏中心

RPCS3完全攻略&#xff1a;从零开始打造你的PC端PS3游戏中心 【免费下载链接】rpcs3 PS3 emulator/debugger 项目地址: https://gitcode.com/GitHub_Trending/rp/rpcs3 还在为无法重温经典PS3游戏而烦恼吗&#xff1f;想要在电脑上体验《最后生还者》、《神秘海域》等索…...

编程新知 2026/3/30 15:02:40

解锁Joplin无缝笔记体验：3大场景实现全平台知识管理自由

解锁Joplin无缝笔记体验&#xff1a;3大场景实现全平台知识管理自由 【免费下载链接】joplin Joplin 是一款安全笔记记录与待办事项应用&#xff0c;具备跨平台同步功能&#xff0c;支持 Windows、macOS、Linux、Android 和 iOS 平台。 项目地址: https://gitcode.com/GitHub…...

编程新知 2026/3/30 14:26:05

终极指南：ComfyUI-LTXVideo深度解析与高效视频生成实战

终极指南&#xff1a;ComfyUI-LTXVideo深度解析与高效视频生成实战 【免费下载链接】ComfyUI-LTXVideo LTX-Video Support for ComfyUI 项目地址: https://gitcode.com/GitHub_Trending/co/ComfyUI-LTXVideo ComfyUI-LTXVideo 是专为LTX-2视频生成模型设计的强大ComfyUI…...

编程新知 2026/3/30 14:05:26

从休眠到唤醒：深入解读AUTOSAR CanNm的Bus Load Reduction与Immediate Restart机制

从休眠到唤醒&#xff1a;深入解读AUTOSAR CanNm的Bus Load Reduction与Immediate Restart机制 在新能源汽车和智能座舱快速发展的今天&#xff0c;车载电子系统的功耗优化与实时响应能力成为工程师面临的核心挑战。AUTOSAR CanNm模块作为车载网络管理的关键组件&#xff0c;其…...

编程新知 2026/3/30 13:51:21

开源DapFlash深度体验：除了下载程序，它的HEX编辑器还能帮你做什么？

开源DapFlash深度体验&#xff1a;HEX编辑器的隐藏技能树 当大多数嵌入式工程师将DapFlash视为又一个程序烧录工具时&#xff0c;它的HEX编辑器正在芯片深处执行着堪比"数字考古"的任务。上周在调试一款智能家居主控板时&#xff0c;我意外发现Bootloader区域被异常覆…...

编程新知 2026/3/30 13:26:57

如何彻底解决Cursor API限制问题：从免费到Pro的完整指南

如何彻底解决Cursor API限制问题&#xff1a;从免费到Pro的完整指南 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reached your t…...

编程新知 2026/3/30 13:04:25

Sketchfab 3D模型本地化工具：Firefox浏览器专业解决方案

Sketchfab 3D模型本地化工具&#xff1a;Firefox浏览器专业解决方案 【免费下载链接】sketchfab sketchfab download userscipt for Tampermonkey by firefox only 项目地址: https://gitcode.com/gh_mirrors/sk/sketchfab 在数字创作领域&#xff0c;3D资源的离线获取与…...

编程新知 2026/3/30 12:56:22