JavaScript拦截工具Proxy

在 JavaScript 中，Proxy 是一种强大的工具，它允许你通过拦截对象的基本操作（如属性访问、赋值、函数调用等）来定义自定义行为。Proxy 是在 ECMAScript 6（ES6）中引入的，主要用于增强对象的功能和行为。

基本语法

const proxy = new Proxy(target, handler);

target：需要代理的目标对象（可以是普通对象、数组或另一个 Proxy）。
handler：一个对象，包含特定操作的拦截方法（称为“trap”）。

常用 `handler` 的拦截方法（Trap）

以下是 Proxy 支持的常用 trap 方法，以及它们的用途：

Trap	用途
`get`	拦截属性读取，例如 `proxy.prop`。
`set`	拦截属性赋值，例如 `proxy.prop = value`。
`has`	拦截属性检查，例如 `'prop' in proxy`。
`deleteProperty`	拦截属性删除，例如 `delete proxy.prop`。
`ownKeys`	拦截对象自身属性的枚举，例如 `Object.keys(proxy)` 或 `for...in` 循环。
`apply`	拦截函数调用，例如 `proxy()`。
`construct`	拦截构造函数调用，例如 `new proxy()`。

常见用法示例

1. 属性读取拦截

const person = {name: "Alice",age: 25
};const proxy = new Proxy(person, {get(target, prop) {if (prop in target) {return target[prop];} else {return `Property "${prop}" does not exist.`;}}
});console.log(proxy.name); // 输出: Alice
console.log(proxy.gender); // 输出: Property "gender" does not exist.

2. 属性赋值拦截（数据验证）

const person = {name: "Alice",age: 25
};const proxy = new Proxy(person, {set(target, prop, value) {if (prop === "age" && typeof value !== "number") {throw new TypeError("Age must be a number.");}target[prop] = value;return true; // 必须返回 true，表示成功}
});proxy.age = 30; // 正常赋值
console.log(proxy.age); // 输出: 30proxy.age = "thirty"; // 抛出错误: Age must be a number

3. 日志记录

const person = {name: "Alice",age: 25
};const proxy = new Proxy(person, {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;return true;}
});console.log(proxy.name); // 输出日志并获取值
proxy.age = 26; // 输出日志并更新值

4. 禁止删除属性

const person = {name: "Alice",age: 25
};const proxy = new Proxy(person, {deleteProperty(target, prop) {if (prop === "name") {throw new Error("Cannot delete 'name'");}delete target[prop];return true;}
});delete proxy.age; // 成功
console.log(proxy); // 输出: { name: 'Alice' }delete proxy.name; // 抛出错误: Cannot delete 'name'

5. 拦截数组操作

const numbers = [1, 2, 3];const proxy = new Proxy(numbers, {get(target, prop) {if (prop === "last") {return target[target.length - 1];}return target[prop];},set(target, prop, value) {if (prop === "length" && value < target.length) {throw new Error("Cannot shrink the array.");}target[prop] = value;return true;}
});console.log(proxy.last); // 输出: 3
proxy.push(4); // 正常操作
console.log(proxy); // 输出: [1, 2, 3, 4]proxy.length = 2; // 抛出错误: Cannot shrink the array.

6. 动态计算属性

const calculator = {factor: 2
};const proxy = new Proxy(calculator, {get(target, prop) {if (prop === "double") {return target.factor * 2;}return target[prop];}
});console.log(proxy.factor); // 输出: 2
console.log(proxy.double); // 输出: 4