定制对象行为：Proxy 就像你的私人管家，帮你搞定数据校验那些事儿
想象一下，你是一位城堡的主人，你的城堡里住着各种各样的“对象”，比如管家、园丁、厨师等等。你希望他们每个人都按照你的规矩办事，比如管家不能随便花钱，园丁不能把玫瑰花种在厨房里，厨师不能用袜子做菜（希望如此！）。
如果你要亲自监督他们每个人，那简直要累死！你得时刻盯着他们，告诉他们什么能做，什么不能做。这就像直接在对象里写一大堆校验代码，臃肿不堪，而且难以维护。
这时候，你需要一个像“Proxy”这样的私人管家。这个管家就站在城堡门口，所有进出城堡的东西（对象）都要经过他。他可以帮你检查这些“对象”的行为是否符合你的规矩，如果不符合，他就可以阻止他们，或者做一些修正。
这就是 Proxy 的作用：它允许你拦截并自定义对象的基本操作，比如属性读取、属性赋值、函数调用等等。你可以用它来做各种各样的事情，其中一个非常实用的场景就是数据校验。
Proxy：你的对象“私人管家”
Proxy 的语法其实很简单，就像创建一个新的管家：
const target = { // 你的原始对象，也就是城堡里的居民
name: "张三",
age: 30
};
const handler = { // 你的管家，也就是 Proxy 的处理器
get: function(target, property, receiver) {
console.log(`有人想要访问 ${property} 属性！`);
return Reflect.get(target, property, receiver); // 默认行为，获取属性值
},
set: function(target, property, value, receiver) {
console.log(`有人想要修改 ${property} 属性为 ${value}！`);
target[property] = value; // 默认行为，设置属性值
return true; // 表示设置成功
}
};
const proxy = new Proxy(target, handler); // 创建 Proxy 实例，让管家接管城堡
console.log(proxy.name); // 输出: 有人想要访问 name 属性！ 张三
proxy.age = 35; // 输出: 有人想要修改 age 属性为 35！
console.log(target.age); // 输出: 35这段代码创建了一个 Proxy 实例 proxy，它拦截了对 target 对象的 get 和 set 操作。当访问或修改 proxy 对象的属性时，会先触发 handler 中对应的函数，然后执行默认行为。
handler 对象里定义了各种“陷阱”（traps），它们拦截了对象的基本操作。常用的陷阱包括：
get(target, property, receiver): 拦截读取属性操作。set(target, property, value, receiver): 拦截设置属性操作。apply(target, thisArg, argumentsList): 拦截函数调用操作。construct(target, argumentsList, newTarget): 拦截new操作符。
当然，还有很多其他的陷阱，你可以根据需要选择使用。
数据校验：让你的数据更靠谱
现在，让我们用 Proxy 来实现一个数据校验的例子，让你的数据更加靠谱。
假设你正在开发一个用户注册系统，你需要校验用户输入的用户名和年龄。用户名不能为空，年龄必须是数字且在 18-100 之间。
const user = {
username: "",
age: 0
};
const validator = {
set: function(target, property, value, receiver) {
if (property === "username") {
if (!value) {
throw new Error("用户名不能为空！");
}
} else if (property === "age") {
if (typeof value !== "number") {
throw new Error("年龄必须是数字！");
}
if (value < 18 || value > 100) {
throw new Error("年龄必须在 18-100 之间！");
}
}
target[property] = value;
return true;
}
};
const validatedUser = new Proxy(user, validator);
try {
validatedUser.username = ""; // 抛出错误：用户名不能为空！
validatedUser.age = "abc"; // 抛出错误：年龄必须是数字！
validatedUser.age = 15; // 抛出错误：年龄必须在 18-100 之间！
validatedUser.username = "李四";
validatedUser.age = 25;
console.log(validatedUser); // 输出: { username: "李四", age: 25 }
} catch (error) {
console.error(error.message);
}在这个例子中，我们创建了一个 validator 对象，它拦截了 set 操作，并对 username 和 age 属性进行校验。如果校验失败，就抛出一个错误。这样，我们就可以确保用户输入的数据是有效的。
Proxy 的优势：解耦与复用
使用 Proxy 进行数据校验，最大的优势在于解耦和复用。
- 解耦： 校验逻辑与对象本身分离，使得对象更加简洁，易于维护。想象一下，如果所有的校验逻辑都写在
user对象里，那代码将会变得非常臃肿。 - 复用： 校验逻辑可以复用于多个对象。你可以为不同的对象创建不同的 Proxy 实例，使用相同的校验逻辑，而无需重复编写代码。
例如，你可能还有其他的对象需要校验年龄，比如员工信息、学生信息等等。你可以创建一个通用的年龄校验函数，然后在不同的 Proxy 实例中使用它。
function validateAge(age) {
if (typeof age !== "number") {
throw new Error("年龄必须是数字！");
}
if (age < 18 || age > 100) {
throw new Error("年龄必须在 18-100 之间！");
}
}
const employee = {
name: "王五",
age: 0
};
const student = {
name: "赵六",
age: 0
};
const employeeValidator = {
set: function(target, property, value, receiver) {
if (property === "age") {
validateAge(value);
}
target[property] = value;
return true;
}
};
const studentValidator = {
set: function(target, property, value, receiver) {
if (property === "age") {
validateAge(value);
}
target[property] = value;
return true;
}
};
const validatedEmployee = new Proxy(employee, employeeValidator);
const validatedStudent = new Proxy(student, studentValidator);
try {
validatedEmployee.age = 15; // 抛出错误：年龄必须在 18-100 之间！
validatedStudent.age = "abc"; // 抛出错误：年龄必须是数字！
} catch (error) {
console.error(error.message);
}Proxy 的更多可能性：除了数据校验，还能做什么？
除了数据校验，Proxy 还可以用于各种各样的场景，比如：
- 日志记录： 记录对象的属性访问和修改，方便调试和分析。
- 权限控制： 控制对对象属性的访问权限，比如只允许管理员修改某些属性。
- 缓存： 缓存对象的计算结果，提高性能。
- 数据绑定： 将对象的数据绑定到 UI 界面，实现自动更新。
Proxy 的局限性：并非银弹
虽然 Proxy 功能强大，但它并非万能。它也有一些局限性：
- 兼容性： Proxy 是 ES6 的新特性，在一些老版本的浏览器中可能不支持。
- 性能： Proxy 会增加一些额外的开销，在一些性能敏感的场景下需要谨慎使用。
- 无法代理某些操作： 例如，无法代理
in操作符，也无法代理非配置属性。
总结：Proxy，你的代码魔术师
Proxy 就像你的代码魔术师，它可以让你以一种优雅的方式控制对象的行为，实现各种各样的功能。虽然它并非银弹，但它仍然是一个非常有用的工具，可以帮助你编写更加简洁、易于维护的代码。
下次当你需要定制对象的行为时，不妨试试 Proxy，它可能会给你带来惊喜！记住，选择合适的工具，让你的代码更高效、更优雅，就像选择一位优秀的管家，让你的城堡更加井井有条。