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

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

news 2026/2/7 22:08:05

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScript:ES6中类与继承

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

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

通用指令（汇编）

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

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

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

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

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

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

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

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

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

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

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

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

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

FortiGate防火墙日志审计运维

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

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

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

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

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

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

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

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

MyBatis-动态SQL-foreach

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

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

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

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

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

音视频技术开发周刊 | 305

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

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

import html2canvas from ‘html2canvas’ html2canvas(canvasDom, options).then(canvas > { //此时的图片是base64格式的，我们将图片格式转换一下 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)继承子类是一个派生类，他派生自父类（基类），通过 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

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性标准答案： 语义化标签： <header>：页头<nav>：导航<main>：主要内容<article>&#x…...

编程新知 2026/1/15 21:24:41

ES6从入门到精通：前言

ES6简介 ES6（ECMAScript 2015）是JavaScript语言的重大更新，引入了许多新特性，包括语法糖、新数据类型、模块化支持等，显著提升了开发效率和代码可维护性。核心知识点概览变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/8/18 16:42:44

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码思路进入页面发现是一个登录框，很难让人不联想到SQL注入，但提示都说了不是SQL注入，所以就不往这方面想了先查看一下网页源码，发现一段JavaScript代码，有一个关键类ctfs…...

编程新知 2026/2/5 4:33:58

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

编程新知 2025/10/6 14:17:21