浅谈下javascript的proxy和reflect

近日喜欢上了uniapp和vue，但看到相关程序代码中频繁出现了proxy和reflect的使用，于是进行了一番学习，现总结如下。

Proxy和Reflect是ES6（ECMAScript 2015）引入的两个新的特性，它们共同提供了一种可编程的方式，用于拦截、修改、和定义JavaScript对象的基本行为。在这里，我将简单介绍Proxy和Reflect的概念，以及它们的用法。

Proxy是一个代理对象，它可以用来拦截JavaScript对象的一些基本操作。代理对象包装了目标对象，并可以在目标对象上定义各种拦截器。拦截器是一些函数，它们被调用以响应目标对象的行为。例如，当代理对象的属性被访问时，拦截器可以拦截这个行为并返回一个不同的值，或者抛出一个错误。

下面是一个例子，展示了如何使用Proxy来拦截对象的读取操作：

const target = {
  name: "Alice",
  age: 30
};

const handler = {
  get: function(target, prop) {
    console.log(`Reading property '${prop}'`);
    return target[prop];
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.name); // 输出 "Reading property 'name'" 和 "Alice"

 

在这个例子中，我们定义了一个代理对象proxy，它包装了一个目标对象target。我们还定义了一个拦截器handler，其中的get方法被调用以拦截proxy对象的属性读取操作。当我们使用proxy.name读取代理对象的name属性时，拦截器会输出一条日志并返回目标对象的name属性值。

Proxy是一种代理对象，它允许你定义自定义的行为，例如：属性的读取和赋值、函数调用、构造函数调用等等。当你创建一个代理对象时，你可以传递一个处理程序对象，这个处理程序对象定义了代理对象的行为。例如：

let obj = new Proxy({}, {
  get(target, prop) {
    console.log(`Getting property "${prop}"`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`Setting property "${prop}" to "${value}"`);
    target[prop] = value;
  }
});

obj.foo = "bar";
console.log(obj.foo); // 输出 "Getting property "foo"  bar"

在上面的代码中，我们创建了一个空对象的代理，然后定义了一个处理程序对象，该处理程序对象将处理代理对象的属性访问。当我们给代理对象设置一个属性时，代理对象会调用设置属性的处理程序，该处理程序会输出一条消息。当我们获取代理对象的属性时，代理对象会调用获取属性的处理程序，该处理程序也会输出一条消息。

Reflect则是一个内置对象，它提供了一组方法来操作JavaScript对象。Reflect的方法与一些对象操作的方法（例如Object.defineProperty和Object.create）非常相似，但是Reflect方法更加一致和易于使用，并且可以作为函数调用。Reflect提供的方法与Proxy对象的拦截器方法相对应。Reflect方法返回值与Proxy对象的拦截器方法返回值是相同的。这些方法包括Reflect.get()、Reflect.set()、Reflect.has()、Reflect.deleteProperty()等等。例如：

let obj = { foo: "bar" };

Reflect.set(obj, "foo", "baz"); // 设置 "foo" 的值为 "baz"
console.log(Reflect.get(obj, "foo")); // 输出 "baz"

在上面的代码中，我们使用Reflect.set方法设置了obj对象的"foo"属性的值为"baz"，然后使用Reflect.get方法获取了obj对象的"foo"属性的值。与Proxy类似，Reflect还提供了许多其他方法，例如Reflect.construct用于调用构造函数，Reflect.defineProperty用于定义属性等等。

下面是一个例子，展示了如何使用Reflect来代替对象操作：

const obj = { a: 1 };

console.log(obj.a); // 输出 1

const proxy = new Proxy(obj, {
  get: function(target, prop, receiver) {
    console.log(`Reading property '${prop}'`);
    return Reflect.get(target, prop, receiver);
  }
});

console.log(proxy.a); // 输出 "Reading property 'a'" 和 1

 

在这个例子中，我们使用Reflect的get方法来代替了拦截器方法中的return target[prop]。这种方式使代码更简洁和易于维护，因为我们可以使用标准的对象操作方法，同时还可以在拦截器中进行自定义操作。

总之，Proxy和Reflect是一对非常强大的特性，它们可以帮助我们更灵活、更可控地操作JavaScript对象。使用它们，我们可以实现一些很酷的功能，例如数据验证、对象代理