ES Proxy

Posted 2021-09-13 张仪ranck

Proxy 修改操作的默认行为

const obj = {
  name: "ranck",
  message: "hello"
}
const handler = {

}

const proxy = new Proxy(obj, handler)

一个对象的操作方法有13种

1. get
2. set
3. deleteProperty
4. defineProperty
5. apply (call)
6. constructor
7. setPrototypeOf
8. getPrototypeOf
9. ownKeys (枚举)
10. has （in， 包括原型链）
11. getOwnPropertyDescriptor
12. isExtensible
13. preventExtensions

取消Proxy代理

Proxy.revocable()方法返回一个可取消的 Proxy 实例。

const {proxy, revoke} = Proxy.revocable(obj,handler);

revoke() // 这个函数调用后，proxy就不能生效了

this

代理对象种this，指向的是proxy，而不是target本身

Proxy应用

做一些操作的时候，同时做其他事情

• 数据驱动

function proxyFn(obj, fn) {
 var handler = {
   get(obj, prop) {
     fn();
     Reflect.get(obj, prop)
   }
 }
 
 return new Proxy(obj, handler)
}

• 直接访问变量

访问变量的过程代理请求http接口的行为

function createServe(baseUrl) {
 return new Proxy({}, {
  get (target, prop) {
    return fetch(
      `${baseUrl}/${prop}`
    )
  }
})
}
const serverProxy = createServe("/v1")
serverProxy.dd.then(console.log,console.log)