proxy方法

最新推荐文章于 2024-08-01 16:56:19 发布

Jocelyn_柠檬

最新推荐文章于 2024-08-01 16:56:19 发布

阅读量740

点赞数 14

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/2301_81428463/article/details/136563253

版权

本文详细介绍了JavaScript中的Proxy对象，包括ownKeys方法用于拦截属性遍历，has方法拦截keyin操作，apply方法的应用示例以及revocable方法实现可撤销代理。通过实例展示了如何在对象上动态修改行为并控制访问权限。

摘要由CSDN通过智能技术生成

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)