各位观众老爷，大家好！今天咱们聊聊 JavaScript 里一个贼有意思的东西—— Proxy 的数据拦截能力，特别是 set、get 和 deleteProperty 这三个“陷阱”处理器。
开场白：Proxy 是个啥？
Proxy，中文名叫“代理”，顾名思义，它就是个中间人，横在你的代码和你的数据之间。你访问数据，不直接访问，先经过它这一层。它能干啥呢？它能监视、控制、修改甚至阻止你对数据的访问。听起来是不是有点像你家小区门口的保安？
主角登场：set、get 和 deleteProperty
今天咱们的主角是 Proxy 的三个“陷阱”处理器：
get(target, property, receiver): 拦截读取属性的操作。当你试图读取一个对象的属性时，这个陷阱会被触发。set(target, property, value, receiver): 拦截设置属性的操作。当你试图给一个对象的属性赋值时，这个陷阱会被触发。deleteProperty(target, property): 拦截删除属性的操作。当你试图删除一个对象的属性时，这个陷阱会被触发。
这三个家伙，就像是三个门卫，守在你的数据的大门口，任何对数据的读、写、删，都得经过它们同意。
实战演练：代码说话
光说不练假把式，咱们直接上代码。
1. get 陷阱：拦截读取
假设我们有个 person 对象，里面存着姓名和年龄。我们想在读取年龄的时候，加一个校验，如果年龄是负数，就报错。
const person = {
name: '张三',
age: 25
};
const proxyPerson = new Proxy(person, {
get: function(target, property, receiver) {
console.log(`尝试读取属性：${property}`);
if (property === 'age' && target[property] < 0) {
throw new Error('年龄不能是负数！');
}
return Reflect.get(target, property, receiver); // 必须返回，不然就读不到了
}
});
console.log(proxyPerson.name); // 输出：张三
try {
proxyPerson.age = -10; // 会先触发 set
console.log(proxyPerson.age); // 会触发 get，然后报错
} catch (error) {
console.error(error.message); // 输出：年龄不能是负数！
}代码解释：
- 我们创建了一个
person对象，里面有name和age属性。 - 我们用
Proxy创建了一个proxyPerson对象，把person对象作为目标对象，并定义了get陷阱。 get陷阱的函数接收三个参数：target: 目标对象 (这里的person对象)。property: 要读取的属性名。receiver:this指向的对象。
- 在
get陷阱里，我们先打印一条日志，说明正在读取哪个属性。 - 然后，我们判断如果读取的是
age属性，并且age是负数，就抛出一个错误。 - 最后，用
Reflect.get(target, property, receiver)返回属性值。 注意：一定要返回，不然就读不到属性了！Reflect.get是一个安全的方式来获取属性，它可以处理各种情况，比如属性不存在等等。
2. set 陷阱：拦截设置
现在，我们想在设置年龄的时候，也加一个校验，如果设置的年龄不是数字，就报错。
const person = {
name: '张三',
age: 25
};
const proxyPerson = new Proxy(person, {
set: function(target, property, value, receiver) {
console.log(`尝试设置属性：${property} 为 ${value}`);
if (property === 'age' && typeof value !== 'number') {
throw new Error('年龄必须是数字！');
}
return Reflect.set(target, property, value, receiver); // 必须返回 true，表示设置成功
}
});
proxyPerson.name = '李四'; // 输出：尝试设置属性：name 为 李四
console.log(person.name); // 输出：李四
try {
proxyPerson.age = 'abc'; // 输出：尝试设置属性：age 为 abc，然后报错
} catch (error) {
console.error(error.message); // 输出：年龄必须是数字！
}
console.log(person.age); // 输出：25 (因为设置失败了)代码解释：
- 我们创建了一个
proxyPerson对象，并定义了set陷阱。 set陷阱的函数接收四个参数：target: 目标对象 (这里的person对象)。property: 要设置的属性名。value: 要设置的属性值。receiver:this指向的对象。
- 在
set陷阱里，我们先打印一条日志，说明正在设置哪个属性，设置成了什么值。 - 然后，我们判断如果设置的是
age属性，并且value不是数字，就抛出一个错误。 - 最后，用
Reflect.set(target, property, value, receiver)设置属性值。 注意：一定要返回true，表示设置成功！Reflect.set也是一个安全的方式来设置属性。 如果设置失败（比如因为writable: false），它会返回false，而不会抛出错误。
3. deleteProperty 陷阱：拦截删除
最后，我们想阻止别人删除 name 属性。
const person = {
name: '张三',
age: 25
};
const proxyPerson = new Proxy(person, {
deleteProperty: function(target, property) {
console.log(`尝试删除属性：${property}`);
if (property === 'name') {
throw new Error('不能删除姓名！');
}
return Reflect.deleteProperty(target, property); // 必须返回 true，表示删除成功
}
});
try {
delete proxyPerson.name; // 输出：尝试删除属性：name，然后报错
} catch (error) {
console.error(error.message); // 输出：不能删除姓名！
}
console.log(person.name); // 输出：张三 (因为删除失败了)
delete proxyPerson.age; // 输出：尝试删除属性：age
console.log(person.age); // 输出：undefined代码解释：
- 我们创建了一个
proxyPerson对象，并定义了deleteProperty陷阱。 deleteProperty陷阱的函数接收两个参数：target: 目标对象 (这里的person对象)。property: 要删除的属性名。
- 在
deleteProperty陷阱里，我们先打印一条日志，说明正在删除哪个属性。 - 然后，我们判断如果删除的是
name属性，就抛出一个错误。 - 最后，用
Reflect.deleteProperty(target, property)删除属性。 注意：一定要返回true，表示删除成功！Reflect.deleteProperty也是一个安全的方式来删除属性。
参数详解：target, property, value, receiver
这几个参数在 Proxy 的陷阱处理器中非常重要，咱们再来仔细唠唠：
| 参数 | 含义 |
|---|---|
target |
目标对象。也就是你用 Proxy 代理的那个原始对象。 |
property |
属性名。 对于 get 和 deleteProperty 来说，这是你要访问或删除的属性名。对于 set 来说，这是你要设置的属性名。 |
value |
属性值。 只有在 set 陷阱中才有这个参数，表示你要设置的属性值。 |
receiver |
this 的指向。 在大多数情况下，它指向 proxy 对象本身。 但是，如果你的 proxy 对象是通过原型链继承得到的，那么 receiver 可能会指向继承 proxy 对象的实例。 这在处理继承关系时非常有用。 |
Reflect：代理的得力助手
在上面的代码中，我们都使用了 Reflect 对象。 Reflect 对象提供了一组与 Proxy 处理器对应的方法，比如 Reflect.get、Reflect.set、Reflect.deleteProperty。
为什么要用 Reflect 呢？
- 避免无限循环: 如果你在
get陷阱里直接用target[property]获取属性值，可能会导致无限循环，因为target[property]会再次触发get陷阱。Reflect.get可以避免这个问题，因为它直接访问目标对象的属性，而不会触发Proxy陷阱。 - 提供默认行为:
Reflect对象提供了与Proxy处理器对应的默认行为。 如果你只想在Proxy处理器中做一些额外的操作，而不想完全重写默认行为，就可以使用Reflect对象。 - 更安全:
Reflect对象提供了一种更安全的方式来操作对象。 比如，Reflect.set在设置属性失败时会返回false，而不是抛出错误。
应用场景：Proxy 的妙用
Proxy 的数据拦截能力非常强大，可以应用在很多场景中：
- 数据校验: 就像我们上面的例子，可以在设置属性之前，对数据进行校验，防止非法数据进入。
- 数据格式化: 可以在读取属性之后，对数据进行格式化，比如把日期对象格式化成字符串。
- 权限控制: 可以根据用户的权限，控制用户对某些属性的访问。
- 观察者模式: 可以在属性发生变化时，通知相关的组件，实现观察者模式。
- 数据绑定: 可以把
Proxy对象和 UI 框架结合起来，实现数据绑定，当数据发生变化时，自动更新 UI。 - Mock 数据: 在测试环境中，可以用
Proxy拦截对真实数据的访问，返回预先定义好的 Mock 数据，方便进行单元测试。 - 日志记录: 可以记录所有对数据的访问和修改，方便进行调试和分析。
更高级的用法：receiver 的妙用
receiver 参数在处理继承关系时非常有用。 假设我们有一个父类 Person 和一个子类 Student。 Student 继承了 Person 的属性，并且用 Proxy 代理了 Person 对象。
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
class Student extends Person {
constructor(name, age, grade) {
super(name, age);
this.grade = grade;
}
}
const person = new Person('张三', 25);
const proxyPerson = new Proxy(person, {
get: function(target, property, receiver) {
console.log(`尝试读取属性：${property}`);
console.log(`receiver:`, receiver);
return Reflect.get(target, property, receiver);
}
});
const student = new Student('李四', 18, '高三');
Object.setPrototypeOf(student, proxyPerson); // Student 的原型指向 proxyPerson
console.log(student.name); // 输出：尝试读取属性：name，然后输出：李四
console.log(student.grade); // 直接访问 student 的属性，不会触发 Proxy在这个例子中，student 对象继承了 proxyPerson 对象，当访问 student.name 时，会触发 proxyPerson 的 get 陷阱。 receiver 参数指向 student 对象。 这使得我们可以在 get 陷阱中判断 this 指向的是哪个对象，从而进行不同的处理。
注意事项：Proxy 的坑
Proxy 虽然强大，但也有些需要注意的地方：
- 性能:
Proxy会增加一层额外的处理，可能会影响性能。 在高并发的场景下，需要谨慎使用。 - 兼容性:
Proxy是 ES6 的特性，在一些老版本的浏览器中可能不支持。 - 调试:
Proxy会隐藏一些细节，可能会增加调试的难度。 - 深拷贝:
Proxy代理的是一个对象，而不是对象的值。 如果需要深拷贝一个Proxy对象，需要手动处理。
总结：Proxy，数据拦截的利器
Proxy 的 set、get 和 deleteProperty 陷阱处理器，为我们提供了强大的数据拦截能力。 我们可以利用它们来实现数据校验、数据格式化、权限控制、观察者模式、数据绑定等等。 虽然 Proxy 有一些需要注意的地方，但只要我们合理使用，它就能成为我们开发中的一把利器。
今天就讲到这里，感谢各位观众老爷的观看！ 希望大家能掌握 Proxy 的数据拦截能力，并在实际开发中灵活运用。 下次再见！