ES6 Proxy：拦截和自定义对象操作的魔法

引言

在 JavaScript 中，Proxy 对象是 ES6 引入的一项特性，它提供了一种机制，可以拦截和自定义对象的基本操作。通过 Proxy，你可以创建一个对象的代理，从而在访问或修改对象时进行拦截。

什么是 Proxy？

Proxy 对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。它接收两个参数：目标对象（target）和处理程序对象（handler）。

创建 Proxy

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

let proxy = new Proxy(target, handler);

• target 是你想要代理的对象。
• handler 是一个对象，其属性是当执行操作时 Proxy 会调用的函数。

基本用法

以下是一些常见的拦截操作示例：

拦截属性访问

let target = {};
let handler = {
  get: function(obj, prop) {
    return prop in obj ? obj[prop] : `Property ${prop} not found`;
  }
};

let proxy = new Proxy(target, handler);
console.log(proxy.a); // 如果 target 中没有 'a' 属性，输出 "Property a not found"

拦截属性赋值

let target = {};
let handler = {
  set: function(obj, prop, value) {
    console.log(`Setting ${prop} to ${value}`);
    obj[prop] = value;
    return true;
  }
};

let proxy = new Proxy(target, handler);
proxy.name = '张三'; // 输出 "Setting name to 张三"
console.log(target.name); // 输出 "张三"

拦截函数调用

let target = {
  sayHello() {
    return 'Hello';
  }
};

let handler = {
  apply: function(target, thisArg, argumentsList) {
    return `Calling ${target.sayHello.apply(thisArg, argumentsList)}`;
  }
};

let proxy = new Proxy(target, handler);
console.log(proxy.sayHello()); // 输出 "Calling Hello"

反射应用（Reflect）

Reflect 对象与 Proxy 一起使用，提供了拦截操作的静态方法。这些方法与 handler 中的陷阱（trap）方法相对应，并且会返回操作的结果。

let target = { a: 1 };
let proxy = new Proxy(target, {
  set: function(obj, prop, value) {
    console.log(`${prop} set to ${value}`);
    return Reflect.set(...arguments);
  }
});

proxy.a = 2; // 输出 "a set to 2"

用例

Proxy 可以用在多种场景中，例如：

• 数据验证和修改。
• 缓存机制。
• 拦截并记录对象操作。
• 创建不可变对象。

结论

Proxy 是 ES6 中一个强大的特性，它提供了一种灵活的方式来拦截和自定义对象的基本操作。通过 Proxy，你可以创建更安全、更可控的对象操作，从而扩展 JavaScript 的能力。然而，使用 Proxy 也可能引入额外的复杂性和性能开销，因此在实际应用中需要权衡利弊。