前端知识手写篇-2

1. 实现call

Function.prototype.mycall=function(context){
    if(typeof this !=="function"){
        throw error
    }
    context= context || window;
    const args=[...arguments].slice(1);
    context.fn=this;
    const result=context.fn(...args);
    delete context.fn;
    return result;
}

2. 实现apply

Function.prototype.myapply=function(context){
    if(typeof this !=="function"){
        throw error
    }
    let result=null;
    context=context || window;
    context.fn=this;
    if(arguments[1]){
        result=context.fn(...arguments[1])
    }else{
        result=context.fn()
    }
    delete context.fn;
    return result
}

3. 实现bind

Function.prototype.myBind=function(context){
    if(typeof this !=="function"){
        throw error
    }
    const fn=this;
    const args=[...arguments].slice(1);
    return Fn(){
        return fn.apply(this instanceof Fn?this:context,args.concat(...arguments))
    }
}

4. 手写实现promise

//ES5实现
function MyPromise(fn){
    this.value=null;
    this.state="pendding";
    this.resolveList=[];
    this.rejectList=[];
    const self=this;
    
    function resolve(value){
        // 判断传入元素是否为 Promise 值，如果是，则状态改变必须等待前一个状态改变后再进行改变
        if (value instanceof MyPromise) {
          return value.then(resolve, reject);
        }
        //queueMicrotaskc创建微任务或者下一轮宏任务
        if(self.state==="pendding"){
            self.state="resolve";
            self.value=value;
            self.resolveList.forEach((call)=>queueMicrotask(call(value)))
        }
    }
    function reject(value){
        if(self.stae==="pendding"){
            self.state="reject";
            self.value=value;
            self.rejectList.forEach((call)=>queueMicrotask(call(value)))
        }
    }
    
    try{
        fn(resolve,reject)
    }catch(e){
        reject(e)
    }
}
MyPromise.prototype.then=function(onResolve,onReject){
    onResolve= typeof onResolve==="function"?onResolve:(v)=>v;
    onReject= typeof onRject==="function"?onReject:(e)=>throw(e);
    if(this.state==="pendding"){
        this.resolveList.push(onResolve);
        this.rejectList.push(onReject);
    }
    if(this.state==="reject"){
        onReject(this.value)
    }
    if(this.state==="resolve"){
        onResolve(this.value)
    }
}

5. 实现promise.then的链式

MyPromise.prototype.then=function(onResolve,onReject){
    onResolve= typeof onResolve==="function"?onResolve:(v)=>v;
    onReject= typeof onRject==="function"?onReject:(e)=>throw(e);
    
    return new MyPromise((resolve,reject)=>{
        const success=(value)=>{
            const result=onResolve(value);
            return result instanceof MyPromise ? result.then(resolve,reject) : resolve(result);
        };
        const fail=(value)=>{
            const result=onReject(value);
            return result instanceof MyPromise ? result.then(resolve,reject) : reject(result);
        };
        if(this.state==="pendding"){
            this.resolveList.push(success);
            this.rejectList.push(fail);
        }
        if(this.state==="reject"){
            fail(this.value)
        }
        if(this.state==="resolve"){
            success(this.value)
        }
    })
}

6. 手写Object.create

functon myCreate(obj){
    function FN(){};
    FN.prototype=obj;
    return new FN();
}

隐藏知识点(js事件循环机制)

js引擎线程只执行执行栈中的事件，执行栈中的代码执行完毕，就会读取事件队列中的事件，事件队列中回调事件是异步任务，如此循环；

宏任务是每次执行栈执行的代码（包括每次从事件队列中获取的事件回调并放到执行栈中执行）；setTimeout,setInterver; 微任务是当前宏任务执行后立即执行的任务；promise,process.nextTick