各种手写。

通过各种手写,可以深入理解js的ES6的语法对应的作用以及运作规律。


一、手写new

1 创建一个新对象。
2 将构造函数的作用域赋给新对象(因此this就指向了这个对象)。
3 执行构造函数中的代码(为这个新对象添加属性)。
4 返回新对象。

function myNew(){
let obj={};     //创建一个新对象
let Constructor=[].shift.call(arguments); //获取第一个参数,为构造函数,同时这个操作也会弹出arguments类数组的第一个参数
obj.__proto__=Constructor.prototype; // 将这个新对象挂上构造函数的原型链
let res=Constructor.call(obj,...arguments); //this指向obj
return typeof res==="object"?res:obj; //判断是不是为对象,不是,则返空对象。
}

或者

function myNew(Obj,...args){
  let obj = Object.create(Obj.prototype);//使用指定的原型对象及其属性去创建一个新的对象
  Obj.call(obj,...args); // 绑定 this 到obj, 设置 obj 的属性
  return obj; // 返回实例
}


二、手写promise,promise.all,promise.race

1. promise简易版

详细版

function myPromise(exector){
let self=this;
this.status="pending";
// 这里我们将value 成功时候的值 reason失败时候的值放入属性中
this.value=undefined;
this.reason=undefined;
// 存储then中成功的回调函数
this.onResolvedCallbacks=[];
 // 存储then中失败的回调函数
this.onRejectedCallbacks=[];

//执行成功时,
function resolve(value){
    if(self.status==="pending"){
    self.value=value;
    self.status="resolved";
    self.onResolvedCallbacks.forEach(fn=>fn());
    }
}

//执行失败
function reject(reason){
   if(self.status==="pending"){
    self.reason=reason;
    self.status="rejected";
    self.onRejectedCallbacks.forEach(fn=>fn());
    }
}

// 这里对异常进行处理
     try {
        exector(resolve, reject);
    } catch(e) {
        reject(e)
    }
}
//then改造
myPromise.prototype.then=function(onFullfilled,onRejected){
  let self=this;
  if(this.status==="resoved")
        onFullfilled(self.value);
   if(this.status==="rejected")
        onRejected(self.reason);
   if(this.status==="pending"){
       // 保存回调函数
       this.onResolvedCallbacks.push(()=>{
             onFullfilled(self.value);
       })
        
        this.onRejectedCallbacks.push(()=>{
              onRejected(self.reason);
        })
    }
  return this;
}

省略版

class MyPromise {
  succeed = null
  fail = null
  state = 'pending' 

  constructor(fn) {
    fn(this.resolve.bind(this), this.reject.bind(this))
  }
  
  resolve(result) {
    setTimeout(() => { 
      this.state = 'fulfilled' 
      this.succeed(result)
    })
  }

  reject(reason) {
    setTimeout(() => {
      this.state = 'rejected' 
      this.fail(reason)
    })
  }

  then(succeed, fail) {
    this.succeed = succeed
    this.fail = fail
  }
}

2. promise.all

myPromise.all=function(parr){
  return new myPromise(function(resolve,reject){
    let result=[];
    let count=0;
    for(let i=0;i<parr.length;i++){
      parr[i].then(function(data){
          result[i]=data;
          count++;
          if(count===parr.length)  resolve(result);
      },function(error){
          reject(error);
      })
    }
  })
}

3. promise.race

myPromise.race=function(parr){
   return new myPromise((resolve,reject)=>{
     for(let i=0;i<parr.length;i++){
          parr[i].then(data=>{resolve(data)},error=>{reject(error)})
     }
  }
}

4. 实现catch方法

Promise.prototype.catch=(onRejected)=>{
          return this.then(null,onRejected);
})


三、promise封装JSONP

function jsonp(url){
    return new Promise((resolve,reject)=>{
          const random="xiaokaiJSONCallbackName"+Math.random();
          window[random]=(data)=>{
                resolve(data);
          }   
          const script=document.createElement("script");
          script.src=`${url}?callback=${random}`;
          script.onload=()=> {
              script.remove();
          }
          script.onerror=()=>{
              reject();
        }
        document.body.appendChild(script);
   })  
}
//然后在需要传的js文件里写 window['{{xxx}}']('{{data}}'),后台读取后根据查询参数和数据写新的数据于js。

四、手写promisify函数

问题:
对于一个回调函数f(a,b,c,(err,res)=>{}),把他promisify化
栗子:const f1=promisify(f)
f1(a,b,c).then().catch()

function promisify(fn){
    return function(...args){
         return new promise((resolve,reject)=>{
              fn(...args,(err,res)=>{
                      err?reject(err):resolve(res);
              });
        })
    }
}

五、手写curry化(喵的被虐了)

function curry(fn){
    let len=fn.length;
    let args=[];
    return function curryFn(...partArgs){
        args=args.concat(partArgs);
        if(args.length<len){
              return curryFn;
        }else if(args.length>len{
              throw new Error("参数有问题!")
        }else{
                return  fn(...args);
        }
    }
}

六、简易实现链式调用(喵的被虐了)

function createObj(){};
createObj.prototype={
      work(){return this};
      sleep(time){ setTimeOut(()=>{return this},time)};
      lunch(){return this};
}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容