前端面试手撕题

请补全JavaScript代码，要求实现Object.create函数的功能且该新函数命名为"_objectCreate"。

Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。

Object.create(proto，[propertiesObject])

参数：proto 新创建对象的原型对象。

返回值：一个新对象，带着指定的原型对象和属性。

      const _objectCreate = proto => {
                if(typeof proto !== 'object') return;
                let Fn = function() {};
                Fn.prototype = proto; // Object.create或者_objectCreate生存的对象，其隐式原型就是入参
                return new Fn();  // 通过构造函数创建对象
            }

请补全JavaScript代码，要求实现Function.call函数的功能且该新函数命名为"_call"。

       Function.prototype._call = function(context, ...args) {
                // call方法接受的第一个参数必须是对象类型
                context = typeof context === 'object' ? context : window;
                // 将待执行的函数赋值给context，便于执行, 注意这里的this是一个待执行的函数，并作为属性暂时存入context对象中，
                context['fn'] = this;
                const res = context['fn'](...args);  // 执行属性函数，这时该函数就可以使用context中的属性和外部传入的参数了
                delete context['fn']; //删除暂存的属性
                return res;
            }

请补全JavaScript代码，要求实现Function.bind函数的功能且该新函数命名为"_bind"。

根据题目要求，实现一个仿Function.bind功能的"Function._bind"函数，该函数会返回一个新的函数且该新函数内部通过apply修改了函数内部this指向，核心步骤有：

创建一个新this用来保存旧的this对象返回一个匿名函数，该匿名函数返回通过apply修改了指针指向的函数运算结果

            Function.prototype._bind = function(context, ...args) {
                context = typeof context === 'object' ? context : window;
                const _this = this; // 将待执行的函数缓存
                // bind返回的是一个函数，使用_this暂存this，以免闭包导致作用域不对。
                return function(...otherArgs) {
                    return _this.apply(context, args.concat(otherArgs));
                }
            }

请补全JavaScript代码，要求实现new *** 作符的功能。

      const _new = function(constructor) {
                let obj = {};
                obj.__proto__ = constructor.prototype;
                constructor.call(obj);
                return obj;
            }

请补全JavaScript代码，要求实现Object.freeze函数的功能且该新函数命名为"_objectFreeze"

冻结后的对象不会在被修改, 不能对这个对象进行添加新属性, 不能删除已有属性, 不能修改该对象已有属性的可枚举性, 可配置性, 可写性. 此外冻结一个对象后该对象的原型也不能进行修改.  freeze()  返回和传入的参数相同

请补全JavaScript代码，要求实现一个对象参数的浅拷贝并返回拷贝之后的新对象。
注意：
1. 参数可能包含函数、正则、日期、ES6新对象

浅拷贝的几种方法：

1、Object.assign

2、扩展运算符

3、Array.prototype.concat

4、Array.prototype.slice

           const _shallowClone = target => {
                // Array,null 的 type 类型也是 object
                if(typeof target === 'object' && target !== null) {
                    // 使用构造函数名，也是实例化对象名进行第一步筛选
                    if(/^(RegExp|Date|Set|Map)$/.test(target.constructor.name)) {
                        return target;
                    }
                    // let collect = target instanceof Array  ? [] : {};
                    let collect = target.constructor === Array  ? [] : {};
                    // for in会获取继承属性，使用hasOwnProperty自身属性方法进行过滤
                    for(prop in target) {
                        if(target.hasOwnProperty(prop)) {
                            collect[prop] = target[prop]
                        }
                    }
                    return collect;
                } else {
                    return target; // 剩下的是number,bollean,string,undefined等数据类型
                }
                
            }

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

            const _sampleDeepClone = target => {
                // 复杂的对象类型
                if (target !== null && typeof target === 'object') {
                    const collect = target instanceof Array ? [] : {};
                    for(prop in target) {
                        if(target.hasOwnProperty(prop)) {
                            collect[prop] = _sampleDeepClone(target[prop]);
                        }
                    }
                    return collect;
                } else {
                    return target; // 基础类型直接返回
                }
                
            }

请补全JavaScript代码，要求实现对象参数的深拷贝并返回拷贝之后的新对象。
注意：
1. 需要考虑函数、正则、日期、ES6新对象
2. 需要考虑循环引用问题

请补全JavaScript代码，要求通过寄生组合式继承使"Chinese"构造函数继承于"Human"构造函数。要求如下：
1. 给"Human"构造函数的原型上添加"getName"函数，该函数返回调用该函数对象的"name"属性
2. 给"Chinese"构造函数的原型上添加"getAge"函数，该函数返回调用该函数对象的"age"属性

written-examination/JS的几种继承.js at master · SUNNERCMS/written-examination · GitHub
组合继承核心：通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用

根据题目要求，通过寄生组合式继承使"Chinese"构造函数继承于"Human"构造函数。寄生组合式继承，即通过借用构造函数来继承属性，通过原型链的形式来继承方法，只调用了一次父类构造函数，效率高，也避免了在子类的原型对象上创建不必要的、多余的属性，原型链也不会被改变，核心步骤有：

       // 父类
            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.color = 'yellow';
                this.age = age;
            }
            //寄生：将父类的显示原型的实例对象，作为子类的显示原型
            Chinese.prototype = Object.create(Human.prototype);
            Chinese.prototype.constructor = Chinese;
            Chinese.prototype.getAge = function() {
                return this.age;
            }

请补全JavaScript代码，完成类的继承。要求如下：
1. "Chinese"类继承于"Human"类
2. "Human"类实现一个函数"getName"，返回该实例的"name"属性
3. "Chinese"类构造函数有两个参数，分别为"name"、"age"
4. "Chinese"类实现一个函数"getAge"，返回该实例的"age"属性

知识点：super的传递

请补全JavaScript代码，实现以下功能：
1. 给"Human"构造函数的原型对象添加"getName"方法，返回当前实例"name"属性
2. 将"Chinese"构造函数继承于"Human"构造函数
3. 给"Chinese"构造函数的原型对象添加"getAge"方法，返回当前实例"age"属性

原型链继承核心： 将父类的实例作为子类的原型

请补全JavaScript代码，完成"EventEmitter"类实现发布订阅模式。
注意：
1. 同一名称事件可能有多个不同的执行函数
2. 通过"on"函数添加事件
3. 通过"emit"函数触发事件

    class EventEmitter {
                constructor() {
                    this.events = {} // 事件库：以key，value形式，存放所有的事件
                }
                // 订阅事件
                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(fn => fn());
                    }
                }
                
            }

请补全JavaScript代码，完成"Observer"、"Observerd"类实现观察者模式。要求如下：
1. 被观察者构造函数需要包含"name"属性和"state"属性且"state"初始值为"走路"
2. 被观察者创建"setObserver"函数用于保存观察者们
3. 被观察者创建"setState"函数用于设置该观察者"state"并且通知所有观察者
4. 观察者创建"update"函数用于被观察者进行消息通知，该函数需要打印（console.log）数据，数据格式为：小明正在走路。其中"小明"为被观察者的"name"属性，"走路"为被观察者的"state"属性
注意：
1. "Observer"为观察者，"Observerd"为被观察者

            // 被观察者
            class Observerd {
                constructor(name) {
                    this.name = name;  // name没有初始值，采用传入值
                    this.state = '走路';
                    this.observers = []; // 用于存放观察者
                    
                }
                // 用于保存观察者们：说明实例调用时传入的观察者
                setObserver(observer) {
                    this.observers.push(observer); // 将观察者存起来，好将消息通知到他们
                }
                // 用于设置该观察者"state"并且通知所有观察者
                setState(state) {
                    this.state = state; //将该观察者的状态，进行保留，并同步给其他观察者
                    this.observers.forEach(observer => observer.update(this)); // this指的事被观察者
                }
            }

            // 观察者
            class Observer {
                // 用于被观察者进行消息通知
                update(observerd) {
                    const {name, state} = observerd;
                    console.log(name + '正在' + state);
                }
            }

 使用场景一：一个观察者，对应多个被观察者；

举例：小组成员（被观察者），向组长（观察者）汇报工作状态，组长那会显示每个人不同的状态

 使用场景二：一个被观察者，对应多个观察者；

举例：小组成员（被观察者001）除了向小组长（观察者01）汇报，还要向大组长（观察者02）汇报，会将同一份报告，同步到两个组长那里