Proxy对象深入理解

喜欢ヅ旅行 2022-12-20 03:17 177阅读 0赞

**Proxy** 对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）——代理对象。

let handler = {
          get: function (target, property, receiver) {},
          set: function (target, property, value, receiver) {},
          has: function (target, prop) {},
          deleteProperty: function (target, property) {},
          apply: function (target, thisArg, argumentsList) {}
        }
        const p = new Proxy(target, handler);

（1）target目标对象，要被代理的对象

（2）handler处理器对象，里面包含了各个trap陷阱函数；所有的trap函数叫traps；

（3）对象p就是代理对象，操作对象p会触发对应的trap陷阱函数；

（4）操作target目标对象，不会触发陷阱函数。

# 二、traps陷阱函数 #

### 1、**`handler.get()`** 方法用于拦截对象的读取属性操作。 ###

（1）返回值

get方法可以返回任何值。

（2）拦截——该方法会拦截目标对象的以下操作

*  访问属性: `proxy[foo]和` `proxy.bar`
 *  访问原型链上的属性: `Object.create(proxy)[foo]`

代理对象作为原型，访问新建对象的原型上的属性时，也会触发代理对象的get陷阱函数。

*      let obj = {
              age: 18
            }
            let handler = {
              get: function(target, property, receiver){
                console.log("触发get代理方法")
                // Object.create(p)代理对象p作为原型时，为什么访问receiver程序会崩溃
                return target[property]
              }
            }
            const p = new Proxy(obj, handler);
            console.log(Object.create(p)["age"])
 *  [`Reflect.get()`][Reflect.get]

（3）约束——如果违背以下的约束条件，proxy 会抛出一个 [`TypeError`][TypeError] 异常

*  如果值不可以修改，代理get方法返回值必须是原值
 *  如果代理对象没有get方法，返回值是undefined。

比如：原值是18，经过代理去获取的时候，返回的是20，报错！！

（4）使用

get: function (target, property, receiver) {
            console.log(target);
            console.log(property);
            console.log(receiver);
            return target[property];
          },

**get方法中三个参数：**

target是目标对象；

property是属性名；

receiver是：Proxy或者继承Proxy的对象

Proxy**代理对象p**：包括\[\[Handler\]\]对象、\[\[Target\]\]目标对象、\[\[IsRevoked\]\]能否被销毁

继承Proxy的对象：上面继承代理对象p的对象就是receiver，但是为什么访问的时候会崩溃。

Proxy = {
          [[Handler]]: {
            apply: function(target, thisArg, argumentsList){},
            deleteProperty: function (target, property){},
            get: function (target, property, receiver){},
            has: function (target, prop){},
            set: function (target, property, value, receiver){}
          },
          [[Target]]:{
            age: 18
          },
          [[IsRevoked]]: false
        }

### 2、`handler.set()` 方法是设置属性值操作的捕获器。 ###

（1）返回值

`set()` 方法应当返回一个布尔值。返回 `true` 代表属性设置成功。在严格模式下，如果 `set()` 方法返回 `false`，那么会抛出一个 [`TypeError`][TypeError] 异常。

（2）拦截

*  指定属性值：`proxy[foo] = bar` 和 `proxy.foo = bar`
 *  指定继承者的属性值：`Object.create(proxy)[foo] = bar`
 *  [`Reflect.set()`][Reflect.set]

`（3）约束`

*  如果该属性值设置为不可以被修改，不能修改该属性。
 *  如果么有set方法，不能修改该属性。
 *  在严格模式下，如果 `set()` 方法返回 `false`，那么也会抛出一个 [`TypeError`][TypeError] 异常。

（4）使用

**参数：**

`target：`目标对象。

`property`：将被设置的属性名或 [`Symbol`][Symbol]。

`value`：新属性值。

`receiver`：最初被调用的对象。通常是 proxy 本身，但 handler 的 set 方法也有可能在原型链上，或以其他方式被间接地调用（因此不一定是 proxy 本身）。

**比如：**假设有一段代码执行 `obj.name = "jen"`， `obj` 不是一个 proxy，且自身不含 `name` 属性，但是它的原型链上有一个 proxy，那么，那个 proxy 的 `set()` 处理器会被调用，而此时，`obj` 会作为 receiver 参数传进来。

[Reflect.get]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect/get
[TypeError]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/TypeError
[Reflect.set]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect/set
[Symbol]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol