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
待提高

应用场景

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