proxy应用场景

//场景一：可以修改对象的值
let o = {
   name: 'xiaoming',
   price: 190
}
let d = new Proxy(o,{
   get (target,key){
      if(key === 'price'){
          return target[key] + 20
      }else{
          return target[key]
      }
   }
})
console.log(d.price,d.name)

//场景二：不修改其代理的值,只读
let o = {
   name: 'xiaoming',
   price : 190
}

let d = new Proxy(o,{
  get (target,key) {
     return target[key]
  },
  set (target, key, value) {
     return false
  }
})
d.price = 300
console.log(d.price,d.name)

//es5实现只读,缺点：客户和程序员都不能修改
for(let [key] of Object.entries(o)) {
   Object.defineProperty(o,key,{
      writable: false
   })
}
o.price = 300
console.log(d.price,d.name)

//场景三：不破坏数据接口，符合校验规则

 let o = {
    name: 'xiaoming',
    price : 190
 }
 let validator = (target, key, value) => {
    if(Reflect.has(target,key)) {
        if(key === 'price') {
            if(value > 300) {
                return false
            }else {
                target[key] = value
            }
        }else {
           target[key] = value
        }
     }else{
         return false
     }
 }
 let d = new Proxy(o, {
   get (target, key) {
      return target[key] || ' '
   },
   set: validator
 })
 d.price = 203
 d.name = 'heiei'
 d.age = 30
 console.log(d.price,d.name, d.age)

//场景4：生成随机编码，只读
class Component {
  constructor () {
    this.proxy = new Proxy({
      id: Math.random().toString(36).slice(-8)
    },{})
  }
  get id() {
    return this.proxy.id
  }
}
let com = new Component()
let com2 = new Component()
for(let i = 0; i < 10; i++){
  console.log(com.id,com2.id)
}
com.id = '123'
console.log(com.id,com2.id)

//场景5：如何撤销代理

let o = {
   name: 'xiaoming',
   price : 190
}
let d = Proxy.revocable(o, {
  get (target, key) {
    if(key === 'price') {
      return target[key] + 20
    }else {
      return target[key]
    }
  }
})
console.log(d.proxy.price, d)
setTimeout(function () {
  d.revoke()
  setTimeout(function  () {
    console.log(d.proxy.price)
  },100)
},1000)