JS Proxy 介绍与示例

Description

Proxy对象允许您创建一个可以代替原始对象的对象，但它可以重新定义基本的对象操作，如获取、设置和定义属性。

创建一个Proxy对象需要两个参数:

1. target : 您想代理的原始对象
2. Handler : 一个对象，它定义了哪些操作将被拦截，以及如何重新定义被拦截的操作。

example

下面这个例子中，我们创建了一个代理对象proxy1，同时我们传入了两个参数，由于第二个参数是空对象，所以这个代理对象和之前的对象没有什么区别

const target = {
  message1: "hello",
  message2: "everyone"
};

const handler1 = {};

const proxy1 = new Proxy(target, handler1);

console.log(proxy1.message1); // hello
console.log(proxy1.message2); // everyone

// 修改proxy对象也会影响原来的对象
console.log(proxy1.message1) // world
console.log(target.message1) // world

我们传一个有意义的handler试一试：

const target = {
  message1: "hello",
  message2: "everyone"
};

const handler2 = {
  get(target, prop, receiver) {
    return "world";
  }
};

const proxy2 = new Proxy(target, handler2);

console.log(proxy2.message1); // world
console.log(proxy2.message2); // world
console.log(target.message1); // hello
console.log(target.message2); // everyone

上面这个例子中，我们的handler重定义了get方法，从而达到拦截原始的get方法的目的。如果这个时候我们访问代理对象的两个属性，都会返回world，访问原对象则不受影响。

那get方法是什么？
简单的讲，就是获取对象属性的一个方法
把参数打印出来看一眼

target: {"message1":"hello","message2":"everyone"}
prop: message1
world: 会无限递归

那第一和第二个参数就很清楚了，第一个参数是被代理的对象，第二个参数被代理对象的属性（也就是请求这个属性本来应该返回这个东西的）
但是如果打印第三个参数就会无限递归。我们还是去看看mdn吧！

非常好！看完还是没懂！
看一看例子，非常好！也没有使用这个参数的例子，好，那我也不钻这个牛角尖了。
不过打印会递归调用，说明打印这个属性会继续调用get方法，那么我猜测可能receiver就是我们创建出来的这个代理对象！