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

FED16 简易深拷贝

描述

请补全JavaScript代码,要求实现对象参数的深拷贝并返回拷贝之后的新对象。

注意:

  1. 参数对象和参数对象的每个数据项的数据类型范围仅在数组、普通对象({})、基本数据类型中]
  2. 无需考虑循环引用问题
html 复制代码
<!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. 需要考虑循环引用问题
html 复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	
        <script type="text/javascript">
            const _completeDeepClone = (target, map = new Map()) => {
                // 补全代码
                if(target===null) return target
                if(typeof target!=='object') return target
                const constructor=target.constructor
                if(/^(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"属性
html 复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	
        <script type="text/javascript">
            // 补全代码
            function Human(name) {
                this.name = name
                this.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=age
                this.color = 'yellow'
            }
            
            Chinese.prototype=Object.create(Human.prototype)
            Chinese.prototype.constructor=Chinese
            Chinese.prototype.getAge=function(){
                return this.age
            }
        </script>
    </body>
</html>

FED19 发布订阅模式

描述

请补全JavaScript代码,完成"EventEmitter"类实现发布订阅模式。

注意:

  1. 同一名称事件可能有多个不同的执行函数
  2. 通过"on"函数添加事件
  3. 通过"emit"函数触发事件
html 复制代码
<!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"为被观察者
html 复制代码
<!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>
相关推荐
老前端的功夫几秒前
Webpack打包机制与Babel转译原理深度解析
前端·javascript·vue.js·webpack·架构·前端框架·node.js
初遇你时动了情1 分钟前
管理系统权限管理(菜单、页面、按钮)react+redux/vue3 pinia实现方式
前端·react.js·前端框架
一只爱吃糖的小羊2 分钟前
React 避坑指南:让电脑卡死的“无限循环“
前端·react.js
by__csdn4 分钟前
javascript 性能优化实战:垃圾回收优化
java·开发语言·javascript·jvm·vue.js·性能优化·typescript
IT_陈寒5 分钟前
Java 21新特性实战:5个杀手级功能让你的代码效率提升50%
前端·人工智能·后端
Komorebi゛5 分钟前
【Vue3+Element Plus+Vite】按需导入Element Plus组件并配置全局样式文件
前端·css·vue.js
by__csdn6 分钟前
JavaScript性能优化:减少重绘和回流(Reflow和Repaint)
开发语言·前端·javascript·vue.js·性能优化·typescript·vue
十一.3668 分钟前
106-110 操作内联样式,获取元素的样式,其他样式相关的属性
前端·html
张人玉9 分钟前
高德API精讲系——vue+高德API搭建前端环境页面
前端·javascript·vue.js·高德api
西西偷西瓜20 分钟前
Trae IDE 读取并解析接口文档:trae-swagger-mcp 插件开发分享
前端·ide·自动化·yapi·ai编程