01_js中的Proxy解析

Proxy从字面上的意思，可以理解为代理器，主要用于定义外部对js对象属性的读写操作的过滤和改写

let proxy = new Proxy(target, handler)

proxy的定义，都可以使用上面的形式来定义，其中，new Proxy()表示生成一个Proxy实例，target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为。如果handler没有设置任何拦截，那就等同于直接通向原对象。

• 拦截对象属性的读取操作

  需要在handler中定义一个get函数：get(target, propKey, proxy)

  get函数接受三个参数，依次为目标对象、属性名和 proxy 实例本身，其中最后一个参数为可选参数

• 拦截对象属性读取的例子

  假如后端给我们返回了一个json数据格式如下，其中有一个字端avatar，是一个图片链接，使用的是相对路径，在显示它之前，我们首先需要在前面拼接上域名http://xx.xxx.xxx之后，头像才能正常显示出来，然而我们在很多页面都需要显示它。那么就可以使用Proxy拦截目标对象的属性读取，在不改变目标对象的前提下，来统一拼接上域名了。

  let serverUrl = "http://xx.xxx.xxx"
  let userInfo = {
    avatar: "/uploadFile/user_001/avatar.png"
  }
  let userInfoProxy = new Proxy(userInfo, {
    get: function(target, key) {
      if(target[key] && target[key].endsWith("png") && target[key].indexOf(serverUrl) == -1) {
        //如果是图片路径，转为全路径
        return serverUrl + target[key]
      }
      return target[key]
    }
  })
  

  分别打印userInfo、userInfoProxy、userInfoProxy.avatar

  console.log(userInfo)
  console.log(userInfoProxy)
  console.log(userInfoProxy.avatar)
  

  

  可以看到，通过userInfoProxy读取avatar的值时，会自动转为全路径返回。

• 拦截对象属性的赋值(写)操作

  需要在handler中定义一个set函数: set(target, propKey, propValue, proxy)

  set函数接受四个参数，依次为目标对象、属性名，属性值和 proxy 实例本身，其中最后一个参数为可选参数

  注: 定义 Proxy 代理对象的 set 的时候，特别是在严格模式下，一定要返回true，否则，会报 'set' on proxy: trap returned falsish for property 'xxx'的错误

• 拦截对象属性赋值的例子

  继续沿用上面的例子，通过userInfoProxy给avatar赋值时，将全路径转为相对路径

  let serverUrl = "http://xx.xxx.xxx"
  let userInfo = {}
  let userInfoProxy = new Proxy(userInfo, {
    set: function(target, key, value) {
      if(value && value.endsWith("png") && value.indexOf(serverUrl) != -1) {
        //如果是图片路径，转为相对路径路径
        target[key] = value.replace(serverUrl, "")
      } else {
        target[key] = value
      }
      return true
    }
  })
  

  通过userInfoProxy修改avatar的值，分别打印userInfoProxy，userInfo

  userInfoProxy.avatar = serverUrl + "/uploadFile/user_001/avatar1.png"
  console.log(userInfoProxy)
  console.log(userInfo)
  

  

  可以看到，通过userInfoProxy修改avatar的值，传入了一个全路径，最后通过userInfoProxy赋值的时候，会自动转为相对路径。