JS 中Proxy代理和 Reflect反射方法示例详解

什么是 Proxy 代理

在 ES6 中，我们可以使用 Proxy 对象来创建代理对象。代理对象可以拦截并改变底层 JavaScript 引擎对原始对象的默认行为，从而实现自定义行为。

创建一个代理对象的基本语法如下：

let proxy = new Proxy(target, handler)

其中，target 是要被代理的原始对象，handler 是用来拦截并处理操作的一个对象。

Proxy 常用拦截操作

使用 Proxy 对象可以拦截的操作很多，例如：

• get / set 拦截：访问/设置对象属性时拦截；
• apply 拦截：函数调用时拦截；
• construct 拦截：使用 new 关键字创建对象时拦截；
• has 拦截：检查对象是否拥有某个属性时拦截；
• deleteProperty 拦截：使用 delete 操作符删除属性时拦截；
• ...

Reflect 对象

Reflect 是一个为操作对象而设计的内置对象，它提供了一组函数方法，用于执行和对象相关的默认行为，这些函数方法与代理对象中的拦截方法相对应。

使用 Reflect 对象的基本语法如下：

Reflect.method(target, ...args)

其中，target 是要操作的目标对象，method 是 Reflect 提供的对应方法，...args 是针对 method 方法的参数。

例如，我们可以使用 Reflect.get(target, propertyKey, receiver) 方法读取一个对象的属性值。这个方法与使用 proxy 对象时触发的 get 拦截器方法是相对应的。

示例一

下面是一个 Proxy 实例，实现了对一个对象属性赋值时的监听：

const target = { name: 'Tom' }

let proxy = new Proxy(target, {
  set(target, propertyKey, value, receiver) {
    console.log(`${propertyKey} 属性被赋值为 ${value}`)
    return Reflect.set(target, propertyKey, value, receiver)
  }
})

proxy.name = 'Jerry'  // 输出 "name 属性被赋值为 Jerry"

在上面的代码中，使用 set 拦截器监听了 proxy 对象中属性赋值的操作，在拦截器方法被触发时输出了赋值信息，并使用 Reflect.set 方法完成属性的赋值操作。

示例二

下面是一个 Proxy 实例，实现了对一个对象的某个属性求值时的监听：

const target = { a: 1, b: 2 }

let proxy = new Proxy(target, {
  get(target, propertyKey, receiver) {
    console.log(`${propertyKey} 属性被读取`)
    return Reflect.get(target, propertyKey, receiver)
  }
})

console.log(proxy.a)  // 输出 "a 属性被读取"，并返回 1

在上面的代码中，使用 get 拦截器监听了 proxy 对象中属性读取的操作，在拦截器方法被触发时输出了求值信息，并使用 Reflect.get 方法返回了本来要求职的属性值。

参考链接

1. MDN - Proxy
2. MDN - Reflect