Proxy 对象是做什么用的？

打开 Chrome 控制台，输入 window.Proxy ，你会发现 JavaScript 已经内置了一个全局的 Proxy 对象，请问这个对象是做什么用的？

其实你用关键词「Proxy MDN」搜索一下，就能得到一个详细的教程。（在关键词后面加 MDN 是一个前端必备的小技巧哦）

我今天只做一个简单的介绍。

假设我们有一个数据（对象）data，内容为

var data = {
  username: 'Frank',
  age: 26
}

现在我们给 data 创建一个代理 proxy

var proxy = new Proxy(data, {set: function(){...}, get: function(){...} })

那么，「proxy 就全权代理 data 了」，这话是什么意思呢？

意思就是 data 放假去了，如果你有任何事情要找 data，直接找 proxy 就好了，proxy 现在是 data 的秘书、代理人。

比如原本你如果要改 username，那么应该写 data.username = 'frank'；

那么现在你只需要写 proxy.username = 'frank' 就好了。

原本你如果想写 console.log(data.username)，现在也只需要 console.log(proxy.username) 就可以了。

这样做什么意义？

意义就是你能监控每一次对 data 的读写操作。

proxy.username = 'frank' 这句话实际上会运行 set 方法。set 方法可以对传入的值进行监控和过滤。

假设 PM 要求「username 前后不能含有空格」，用 Proxy 就很好实现这一需求，只需要把 set 写成这样：

set: function(obj, prop, value){
  obj[prop] = value.trim()
}

再假设 PM 要求「统计 username 被读取的次数」，那么我们只需要把 get 写成这样：

get: function(obj, prop){
  if(prop === 'username'){
    count += 1
  }
  return obj[prop]
}

双向绑定

既然用 Proxy 能监控一个变量的读写情况，那么我们就很容易实现一个双向绑定了。

具体代码看这里。

以上，就是 Proxy 的简介了。

饥人谷一直致力于培养有灵魂的编程者，打造专业有爱的国内前端技术圈子。如造梦师一般帮助近千名不甘寂寞的追梦人把编程梦变为现实，他们以饥人谷为起点，足迹遍布包括facebook、阿里巴巴、百度、网易、京东、今日头条、大众美团、饿了么、ofo在内的国内外大小企业。 了解培训课程：加微信 xiedaimala03，官网:https://jirengu.com

本文作者：饥人谷方应杭老师