JavaScript - Proxy

Proxy 是代理的意思.

代理什么?

据我自己的简单测试,它代理了对象的 set & get 方法.

JavaScript作为一门编程语法,对属性(或者说是字段)没有提供原生的 setter & getter 函数.这些功能在其他的,类似于 Java,.Net,Objective-C里都有提供.

所以,proxy 更像是 JavaScript 提供的一个统一的属性的getter & setter 的监测接口.

---

Proxy 简单语法

Proxy 是一个构造函数,在调用的时候,将需要监控的对象以及 监控到了对象set|get 操作时该如何去做.

let obj = {
  id: 1,
  level:10,
  name: '李四'
}

现在有一个需求,如果 level = 10 ,需要在名字加上 vip 标记.

那我们就不能直接输出 obj.name 了,起码要判断一下,level === 10 ?

通常做法,我们是写了一个 hasVip() 的方法.

hasVip() {
    if (this.level === 10) {
      return this.name + ' vip'
    }
  }

使用 proxy.

let objProxy = new Proxy(obj, {
  get(obj, prop) {
    if (prop === 'name') {
      return obj.level === 10 ? obj.name + ' vip' : obj.name
    }
  }
})

利用一个Proxy 构造函数把需要代理的 get & set 的对象包装起来.

然后我们在使用此代理对象 objProxy.name 直接输出name 属性即可.

console.log(objProxy.name)

李四 vip

当然,set方法也是一样,在设置属性set的时候,也可以监控.

// 第一个参数,被代理的对象
  // 第二个参数,set监控到的属性
  // 第三个参数,set的值.
  set(obj, prop,value) {
    if (prop === 'id') {
      if (!Number.isNaN(value)) {
        console.log(`${prop} = ${value} 必须是数字!!!!`)
        return
      }
      
      obj.id = parseInt(value)
      console.log(obj.id)
    }
  }

objProxy.id = 'avcde'

id = avcde 必须是数字!!!!

---

总结:

• 原生的js对象属性,我们可以很轻松,甚至是无意识的写 obj.name='xxxx' & let b = obj.name.这样类似于其他语言中可以叫 getter & setter 的方法.
• js之前本身没有提供一个比较好的 getter & setter 机制.
• 利用js新提供的 Proxy 构造函数可以为一个对象在全局上提供一个 get&set,用于监控此对象身上所有的 属性取值和赋值操作.
• 加了一层监控之后,我们就可以根据自己的需求来做一些必要的事情了.