前端手写代码整理

一、JS基础

1. 手写 Object.create

将传入的对象作为原型

function create(obj){
   
    function F(){
   }
    F,prototype=obj;
    return new F();
}

2. 手写 instanceof方法

instanceof 运算符用于判断构造函数的 prototype 属性是否出现在对象的原型链中的任何位置。

function myInstanceof(left,right){
   
    let proto=Object.getPrototypeOf(left);//获取对象的原型
    let prototype=right.prototype;//获取构造函数的原型
    while(true){
   
        if(!proto) return false;
        if(proto===prototype) return true;
        proto=Object.getPrototypeOf(proto);
    }
}

3. 手写 new 操作符

（1）首先创建了一个新的空对象
（2）设置原型，将对象的原型设置为函数的 prototype 对象。
（3）让函数的 this 指向这个对象，执行构造函数的代码（为这个新对象添加属性）
（4）判断函数的返回值类型，如果是值类型，返回创建的对象。如果是引用类型，就返回这个引用类型的对象。

function myNew(Fn,...args){
   
    let obj={
   };
    obj._proto_=Fn.prototype;
    let res=Fn.call(obj,...args);
    if(res&& (typeof res==='object'||typeof res==='function')){
   
        return res;
    }else
        return obj;
}

优化：

function myNew(){
   
    let obj=null;
    let constructor=Array.prototype.shift.call(arguments);
    let res=null;
    
    // 新建一个空对象，对象的原型为构造函数的 prototype 对象
    obj=Object.create(constructor.prototype);
    // 将 this 指向新建对象，并执行函数（为新对象添加属性）
    res=constructor.apply(obj,arguments);
    
    let flag=res&&(typeof res==='object'||typeof res==='function');
    return flag?res:obj;
}
myNew(构造函数, 初始化参数)

4. 手写 Promise

5. 手写防抖函数

（n秒后再执行回调）[ setTimeout(fn,delay) ]

函数防抖是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。
这可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。

利用setTimeout给需要防抖的方法一个延时执行

let timer=null;
function debounce(fn, delay)(
    clearTimeout(timer);
    timer=setTimeout(fn,dalay);
)

优化：

function debounce(fn,delay){
   
    let timer=null; // 利用闭包，避免污染
    return function(){
   
        let context=this;// 获取上下文
        let args=arguments; // 获取当前参数
        if(timer){
    // 如果此时存在定时器的话，则取消之前的定时器重新记时
            clearTimeout(timer);
        }
        // 设置定时器，使事件间隔指定事件后执行
        timer<