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

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

news 2026/2/8 23:15:14

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

KubeSphere 容器平台高可用：环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

编程新知 2026/2/8 15:03:14

工业安全零事故的智能守护者：一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

编程新知 2026/1/21 9:20:07

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

编程新知 2026/2/2 21:52:33

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/9/5 12:16:40

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

编程新知 2025/10/11 0:24:31

Python爬虫（一）：爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

编程新知 2026/1/30 20:42:46

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

编程新知 2026/2/1 16:32:53

JS设计模式(4)：观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

编程新知 2025/9/1 6:48:07

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化（Gradient Normalization）​​ (2) ​判别器梯度间隙正则化（Discriminator Gradient Gap Regularization）​​ (3) ​自注意力机制（Self-Attention）​​ 3. 完整损失函数 二…...

编程新知 2026/1/31 10:58:46

站群服务器的应用场景都有哪些？

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

编程新知 2025/9/1 19:01:24