JS中的Proxy

Proxy直译是代理的意思,在JS中通常用作在目标对象之前架设一层代理,外界对该对象的访问,都必须先通过这层代理,因此可以对外界的访问进行修改和过滤

//调用方法
let d = new Proxy(target, handler)

第一个参数target是所要代理的目标对象,第二个参数handler是一个配置对象,这个对象需要提供一个处理函数,用该函数对目标对象进行拦截。

Proxy的拦截操作列表

1. get操作

get操作用于拦截对象属性的读取,get方法接收三个参数,依次为目标对象,属性名,和proxy实例本身,第三个参数是可选的

let obj = {
  name: 'Nicholas',
  age: 80
}

let proxyObj = new Proxy(obj, {
  get: function(target, attr) {
    return "I am " + target[attr]
  }
})

console.log(proxyObj.name);
console.log(proxyObj.age);

2. set操作

set操作用来拦截对对象内属性的赋值,可以接收四个参数,依次为目标对象,属性名,属性值,proxy实例本身,最后一个参数可选。

let obj = {
    name: 'Nicholas',
    age: 80
  }

  let proxyObj = new Proxy(obj, {
    get: function(target, attr) {
      return 'I am ' + target[attr]
    },
    // set在返回undefined或false时会报错
    set: function(target, attr, value) {
      target[attr] = value
      return true;
    }
  })

  console.log(proxyObj.name);
  console.log(proxyObj.age);
  proxyObj.gender = 'male'
  console.log(proxyObj.gender);

3. 其他操作

  1. handler.getPrototypeOf()
    Object.getPrototypeOf 方法的捕捉器。
  2. handler.setPrototypeOf()
    Object.setPrototypeOf 方法的捕捉器。
  3. handler.isExtensible()
    Object.isExtensible 方法的捕捉器。
  4. handler.preventExtensions()
    Object.preventExtensions 方法的捕捉器。
  5. handler.getOwnPropertyDescriptor()
    Object.getOwnPropertyDescriptor 方法的捕捉器。
  6. handler.defineProperty()
    Object.defineProperty 方法的捕捉器。
  7. handler.ownKeys()
    Object.getOwnPropertyNames 方法和
    Object.getOwnPropertySymbols 方法的捕捉器。
  8. handler.has()
    in 操作符的捕捉器。
  9. handler.get()
    属性读取操作的捕捉器。
  10. handler.set()
    属性设置操作的捕捉器。
  11. handler.deleteProperty()
    delete 操作符的捕捉器。
  12. handler.apply()
    函数调用操作的捕捉器。
  13. handler.construct()
    new 操作符的捕捉器。

Posted

in

by

Tags: