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 的简介了。

作者:方应杭,想学前端?进群

发表评论

电子邮件地址不会被公开。