zhangdizhangdi

代理模式 ⭐

定义

代理模式（Proxy Pattern），为一个对象提供一个代用品或占位符，以便控制对它的访问，可以改变原始对象行为。

实现

js
// ES6的Proxy
let Person = {
  name: 'Zhang San',
  age: 18,
  rate: '',
}

let ProxyPerson = new Proxy(Person, {
  get(target, key) {
    if (key != 'age') {
      return Reflect.get(target, key)
    } else {
      return '保密'
    }
  },
  set(target, key, value) {
    if (key === 'rate') {
      return Reflect.set(target, key, value === 'A' ? '推荐' : '待提高')
    }
    return Reflect.set(target, key, value)
  },
})

console.log(ProxyPerson.name) // 'Zhang San'
console.log(ProxyPerson.age) // '保密'
ProxyPerson.age = '30'
console.log(ProxyPerson.age) // '保密'
console.log(Person.age) // '30'
ProxyPerson.rate = 'B'
console.log(ProxyPerson.rate) // '待提高'
执行结果
Zhang San
保密
保密
30
待提高

应用场景

  • DOM 事件代理
  • ES6 Proxy，Vue3 数据响应
  • 表单验证

参考