关键词：proxy set 拦截器

1. target参数

   • 本质和用途
     • target是被代理的原始对象。它代表了代理操作所基于的实际对象。在Proxy的set拦截器中，target的主要作用是提供对原始对象属性和状态的访问，以便在拦截属性设置操作时，可以正确地将新值应用到原始对象的相应属性上。
   • 示例说明
     • 假设我们有一个简单的对象originalObject = { value: 10 };，并创建了一个代理 const proxy = new Proxy(originalObject, { set });。当拦截器 set 被触发时，target 就是 originalObject。例如：

     const originalObject = { value: 10 };
     const handler = {
       set(target, property, value) {
         console.log(`原始对象是: ${JSON.stringify(target)}`);
         target[property] = value;
         return true;
       },
     };
     const proxy = new Proxy(originalObject, handler);
     proxy.value = 20;

     • 在这个例子中，当设置proxy.value时，target就是originalObject，set拦截器可以通过target来修改originalObject的value属性。

2. receiver参数

   • 本质和用途
     • receiver是实际接收属性设置操作的对象。在简单的情况下，它通常就是代理对象本身。但是，在一些更复杂的场景中，比如涉及到对象的继承或者多层代理时，receiver和target可能不同，它能帮助确定操作发生的真实上下文。
   • 示例说明
     • 考虑这样一个场景，有一个基础对象baseObject，创建了一个代理proxy1，然后又有一个对象通过Object.create(proxy1)创建并继承自proxy1。当在这个继承对象上进行属性设置操作时，receiver将指向这个继承对象，而target仍然是原始被代理的对象。

     const baseObject = { count: 0 };
     const handler = {
       set(target, property, value, receiver) {
         console.log(`接收操作的对象是: ${JSON.stringify(receiver)}`);
         console.log(`原始对象是: ${JSON.stringify(target)}`);
         target[property] = value;
         return true;
       },
     };
     const proxy1 = new Proxy(baseObject, handler);
     const derivedObject = Object.create(proxy1);
     derivedObject.count = 1;

     • 在这个例子中，当设置derivedObject.count时，receiver是derivedObject，因为它是实际接收操作的对象，而target是baseObject，因为它是原始被代理的对象。这就体现了receiver和target在复杂场景下的区别。