【Es6入门实践】10 proxy:代理，promise

01 proxy:代理

在ES6中，proxy是一种增强，增强的是我们的对象和函数（方法）

类似生命周期的钩子函数，只不过这种钩子函数是在你处理任何方法之前进行的

在真正方法执行前处理下，叫预处理

我们之前声明一个对象是这样的

let obj={
  add:function(val){
    return val+100;
  },
  name:'I am a number'
}
console.log(obj.add(100))
console.log(obj.name)

接下来我们操作使用Proxy

let pro=new Proxy({},{})

注意：两个大括号分别放置:对象体，预处理机制

let pro=new Proxy({
  add:function(val){
    return val+100;
  },
  name:'I am a number'
},{
  //get set apply
  get:function(target,key,property){
     console.log('come in get')
  }

})

console.log(pro.name)

怎么体现预处理机制的呢？我们看一下控制台

我们发现没有打印出I am a number
而是打印出了预处理机制里面的come in get

那么如何获取到我们需要的值呢？需要我们return出来

let pro=new Proxy({
  add:function(val){
    return val+100;
  },
  name:'I am a number'
},{
  //get set apply
  get:function(target,key,property){
     console.log('come in get')
     return target[key];
  }

})

console.log(pro.name)

target是什么？其实我们可以打印出来看看

会发现，它就是我们的对象

打印key，会发现它就是我们的name

小结：预处理的get就是在我们得到某个值之前先做一些事情

接下来我们来看预处理中get的用法

let pro=new Proxy({
  add:function(val){
    return val+100;
  },
  name:'I am a number'
},{
  //get set apply
  get:function(target,key,property){
    //  console.log('come in get')
     console.log(key);
     return target[key];
  },
  set:function(target,key,value,receiver){
    console.log(`setting ${key} = ${value}`)
  }

})

console.log(pro.name)
pro.name="coco"

踩个坑

console.log(pro.name)
pro.name="coco"
console.log(pro.name)

我们再次输出console.log(pro.name)

会发现其实没有被改变

为什么？其实预处理之后我们要做返回操作

return target[key]=value;

现在我们发现成功了！

完整代码如下

let pro=new Proxy({
  add:function(val){
    return val+100;
  },
  name:'I am a number'
},{
  //get set apply
  get:function(target,key,property){
    //  console.log('come in get')
    //  console.log(key);
     return target[key];
  },
  set:function(target,key,value,receiver){
    console.log(`setting ${key} = ${value}`)
    return target[key]=value;
  }

})

console.log(pro.name)
pro.name="coco"
console.log(pro.name)

通过上面我们可以得知

• 对象的改变用get，set

那么apply呢

• 方法的改变用apply

//target:匿名函数
let target = function(){
  return 'I am hls'
}

//handler 预处理 声明 这个对象里面的方法如果要预处理 就需要用到apply
let handler={
  apply(target,ctx,args){
    console.log('do apply')
  }
}
//handler:钩子
let pro =new Proxy(target,handler)

console.log(pro())

我们会发现控制台打印出了undefined，所以说还是需要return的

return Reflect.apply(...arguments)

02 Promise

promise 为了解决回调地域 优雅异步
三个步骤（三个方法） 1.洗菜做饭 2.坐下来吃饭 3.收拾桌子洗碗
假设我们需要一个状态来表示是否完成的情况

let state=1; // 1表示完成了
function step1(resolve,reject) {
  console.log('1.开始洗菜做饭')
  //业务逻辑
  if(state==1){
    resolve('洗菜做饭-完成')
  }else{
    reject('洗菜做饭-错误')
  }
}

function step2(resolve,reject) {
  console.log('2.坐下来吃饭')
  //业务逻辑
  // state=0;
  if(state==1){
    resolve('坐下来吃饭-完成')
  }else{
    reject('坐下来吃饭-错误')
  }
}

function step3(resolve,reject) {
  console.log('3.收拾桌子洗碗')
  //业务逻辑
  if(state==1){
    resolve('收拾桌子洗碗-完成')
  }else{
    reject('收拾桌子洗碗-错误')
  }
}

new Promise(step1).then(function(val){
  console.log(val);
  return new Promise(step2)
}).
then(function(val){
  console.log(val);
  return new Promise(step3)
}).
then(function(val){
  console.log(val);
})

现在直接写then，结构化，不用写回调了