通过各种手写，可以深入理解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};
}
