Proxy-Reflect

一、Proxy基本使用

1. 用于创建代理

创建一个代理对象(Proxy对象), 监听一个对象的相关操作, 之后对该对象的所有操作, 都通过代理对象来完成

2. 案例

首先, 我们需要new Proxy对象, 并且传入需要侦听的对象以及一个处理对象, 可以称之为handler

其次, 我们之后的操作都是直接对Proxy的操作, 而不是原有的对象, 因为我们需要在handler里面进行侦听

const obj = {
  name: "qwe",
  age: 18
}
const objProxy = new Proxy(obj, {})
objProxy.name = "abc"

二、Proxy的set和get捕获器

1. set函数有四个参数

target: 目标对象(侦听的对象)

property: 将被设置的属性key

value：新属性值

receiver：调用的代理对象

2. get函数有三个参数

target：目标对象（侦听的对象）

property：被获取的属性key

receiver：调用的代理对象

const objProxy = new Proxy(obj, {
  has: function(target, key) {
    console.log("in 操作符的捕捉器", key)
    return key in target
  },
  set: function(target, key, value) {
    console.log("属性设置操作的捕捉器", key)
    target[key] = value
  },
  get: function(target, key) {
    console.log("属性读取操作的捕捉器", key)
    return target[key]
  },
  deleteProperty: function(target, key) {
    console.log("delete 操作符的捕捉器")
    delete target[key]
  }
})

三、Proxy的construct和apply

捕捉器中还有construct和apply，它们应用于函数对象

function foo() {
  console.log("foo函数被调用了", this, arguments)
  return "foo"
}

const fooProxy = new Proxy(foo, {
  apply: function(target, thisArg, otherArgs) {
    console.log("函数的apply侦听")
    return target.apply(thisArg, otherArgs)
  },
  construct(target, argArray, newTarget) {
 	  return new target()
  }
})

四、Reflect

1. Reflect的作用

它主要提供了很多操作JavaScript对象的方法，有点像Object中操作对象的方法

比如Reflect.getPrototypeOf(target)类似于 Object.getPrototypeOf()

比如Reflect.defineProperty(target, propertyKey, attributes)类似于Object.defineProperty()

2. Reflect的使用

const objProxy = new Proxy(obj, {
  has: function(target, key) {
    return Reflect.has(target, key)
  },
  set: function(target, key, value, receiver) {
		return Reflect.set(target, key, value, receiver)
  },
  get: function(target, key, receiver) {
 		return Reflect.get(target, key, receiver)
  },
  deleteProperty: function(target, key) {
		return Reflect.deleProperty(target, key)
  }
})

3. Reflect的construct

function Student(name, age) {
  this.name = name
  this.age = age
}

function Animal() {
  
}

const stu = Reflect.construct(Student, ["abc", 18], Animal)
console.log(stu.__proto__ === Animal.prototype) // true