proxy方法

proxy方法

1. ownKeys方法：拦截操作，拦截过滤Object.keys()对对象的属性遍历。

let car = {
  price: 100000,
  color: 'white',
  power: 'v8'
}
/* 
  第一个参数：要代理的对象
  第二个参数：对象，对象里有很多方法
*/
let proxyCar = new Proxy(car.{
  get (target, property) {
    //target：代理对象
    //property:属性名
    // console.log(target.property)
    if(property == 'price') {
      return '95折'
    } else {
      return target[property]
    }
  },
// value 需要改变的值
  set(target, property, value) {
    console.log(target, property, value)
    target[property] = value
  },
  ownKeys() {
    return ['price', 'color']
  }
})
console.log(proxyCar.price)
proxyCar.price = 60000
console.log(proxyCar.price)

2. has方法：拦截key in object的操作，结果会返回一个布尔值。 （key in object：判断属性是否存在对象中）

let car = {
  price: 100000,
  color: 'white',
  power: 'v8'
}
/* 
  第一个参数：要代理的对象
  第二个参数：对象，对象里有很多方法
*/
let proxyCar = new Proxy(car.{
  get (target, property) {
    //target：代理对象
    //property:属性名
    // console.log(target.property)
    if(property == 'price') {
      return '95折'
    } else {
      return target[property]
    }
  },
// value 需要改变的值
  set(target, property, value) {
    console.log(target, property, value)
    target[property] = value
  },
  ownKeys() {
    return ['price', 'color']
  },
   has(tartget, property) {
            // console.log(tartget[property]);
            // console.log(tartget, property);
            if (tartget[property] === undefined) {
                return false
            }
            return true
    }
})
console.log(proxyCar.price)
proxyCar.price = 60000
console.log(proxyCar.price)

3. apply方法

let fn = () => {
  console.log('我是箭头函数')
}
let fn1 = new Proxy(fn, {
  apply() {
    console.log('我是代理')
  }
})
fn1()

4. proxy.revocable方法

let carProxy = Proxy.revocable(car, {
  get(target, property) {
    return target[property]
  }
})
console.log(carProxy)
console.log(carProxy.proxy.price)
carProxy.revoke()
console.log(carProxy.proxy.price)