前端知识手写篇-1

1. 防抖函数

防抖是将多次执行变为最后一次执行

function debounce(fn,wait){
    let timer=null;
    return function(...args){
        if(timer) clearTimeout(timer);
        timer=setTimeout(()=>{
            fn.apply(this,args)
        },wait)
    }
}

2. 节流函数

节流是将多次执行变成每隔一段时间执行

//时间戳节流方式在第一次触发后立即执行，以后每过wait后执行一次
function throttle(fn,wait){
    let lastTime=0;
    return function(...args){
        let now=Date.now();
        if(now-lastTime>wait){
            fn.apply(this,args);
            lastTime=now;
        }
    }
}
//定时器节流在第一次触发时不会执行，而是在wait后执行
function throttle2(fn,wait){
    let timer=null;
    return function(...args){
        if(timer) return;
        timer=setTimeout(()=>{
            timer=null;
            fn.apply(this,args)
        },wait)
    }
}

3. 实现new的过程

new做了什么？

1. 创建一个新对象
2. 将构造函数的作用域赋给新对象
3. 执行构造函数中的代码
4. 返回新对象

function myNew(fn，...args){
    let obj={};
    obj._proto_=fn.prototype;
    const result=fn.apply(obj,args)
    return result==='object' && result!==null ?result:obj;
}

function myNew2(fn){
    let obj=Object.create(fn.prototype);
    const result=fn.apply(obj,args)
    return result==='object' && result!==null ?result:obj;
}

4. 实现instanceof

通过原型链的形式层层往上查找

function myInstanceof(left,right){
    if(typeof left !=='object' || left==null) return false;
    let proto=Object.getPrototypeof(left);
    let prototype=right.prototype;
    while(proto){
        if(proto===prototype)return true;
        proto=Object.getPrototypeof(proto);
    }
    return false;
}

相关知识

1. Object.getPrototypeof()等价于_proto_，
2. hasOwnProperty() , isPrototypeof()
3. 只有函数才有prototype属性，指向构造函数的原型对象
4. 引用类型都有_proto_属性，指向该对象的构造函数的原型对象