JS `Proxy` 的 `set` / `get` / `deleteProperty` 陷阱处理器：数据拦截 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，大家好！今天咱们聊聊 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 的数据拦截能力，并在实际开发中灵活运用。下次再见！

发表回复 取消回复

发表回复取消回复