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

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

news 2026/2/7 17:50:15

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

MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下： 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...

编程新知 2025/9/16 21:01:58

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

编程新知 2025/8/13 16:42:24

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

编程新知 2026/1/25 14:43:07

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...

编程新知 2026/2/7 0:28:16

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

编程新知 2026/2/6 2:16:18

Java毕业设计：WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

编程新知 2025/10/27 13:29:11

Spring Boot + MyBatis 集成支付宝支付流程

Spring Boot MyBatis 集成支付宝支付流程 核心流程 商户系统生成订单调用支付宝创建预支付订单用户跳转支付宝完成支付支付宝异步通知支付结果商户处理支付结果更新订单状态支付宝同步跳转回商户页面 代码实现示例&#xff08;电脑网站支付&#xff09; 1. 添加依赖 <!…...

编程新知 2025/10/14 22:57:53

ui框架-文件列表展示

ui框架-文件列表展示 介绍 UI框架的文件列表展示组件&#xff0c;可以展示文件夹&#xff0c;支持列表展示和图标展示模式。组件提供了丰富的功能和可配置选项&#xff0c;适用于文件管理、文件上传等场景。 功能特性 支持列表模式和网格模式的切换展示支持文件和文件夹的层…...

编程新知 2026/2/4 17:34:02

游戏开发中常见的战斗数值英文缩写对照表

游戏开发中常见的战斗数值英文缩写对照表 基础属性&#xff08;Basic Attributes&#xff09; 缩写英文全称中文释义常见使用场景HPHit Points / Health Points生命值角色生存状态MPMana Points / Magic Points魔法值技能释放资源SPStamina Points体力值动作消耗资源APAction…...

编程新知 2026/1/9 12:18:52

【笔记】AI Agent 项目 SUNA 部署 之 Docker 构建记录

#工作记录 构建过程记录 Microsoft Windows [Version 10.0.27871.1000] (c) Microsoft Corporation. All rights reserved.(suna-py3.12) F:\PythonProjects\suna>python setup.py --admin███████╗██╗ ██╗███╗ ██╗ █████╗ ██╔════╝…...

编程新知 2026/1/26 16:27:02